JSFiddle - React, Tailwind, and code Playground

by tyrsius

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<p>
    <span class="editable" data-bind="inlineToggle: alert, type: 'on'"></span> Set an alarm for <span class="editable" data-bind="inline: startTime"></span> using <span class="editable" data-bind="inline: snoozeCount"></span> Snooze(s).
    </br>
    This is a select: <span data-bind="inlineSelect: type, inlineOptions: typeOptions"></span></br>
    This is a multi-Select: <span data-bind="inlineSelectedOptions : types, inlineOptions: typeOptions">
    </span>
</p>
<button data-bind="click: pushOptions">Push</button>

CSS

.editable{
 color:green;   
}

JavaScript

ko.bindingHandlers.inlineSelect = {
    init:  function(element, valueAccessor, allBindingsAccessor){
        var span = $(element);
        var select = $('<select></select>', {'style' : 'display: none'});
        span.after(select);
        
        ko.applyBindingsToNode(select.get(0), { value: valueAccessor(), options: allBindingsAccessor().inlineOptions });
        ko.applyBindingsToNode(span.get(0), { text: valueAccessor()});
        
        span.click(function(){
            span.hide();
            select.show();
            select.focus();        
        });
        
        select.change(function(){
            span.show();
            select.hide();
        });        
    }
};

ko.bindingHandlers.inlineSelectedOptions = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var span = $(element);
        var select = $('<select></select>', {'style' : 'display: none', 'multiple': 'true'});
        span.after(select);
        
        ko.applyBindingsToNode(select.get(0), { selectedOptions: valueAccessor(), options: allBindingsAccessor().inlineOptions });
        ko.applyBindingsToNode(span.get(0), { text: valueAccessor()});
        
        span.click(function(){
            span.hide();
            select.show();
            select.focus();        
        });
        
        select.change(function(){
            span.show();
            select.hide();
        });   
    }
}

ko.bindingHandlers.inline = {
    init: function(element, valueAccessor) {
        var span = $(element);
        var input = $('<input />',{'type': 'text', 'style' : 'display:none'});
        span.after(input);
        
        ko.applyBindingsToNode(input.get(0), { value: valueAccessor()});
        ko.applyBindingsToNode(span.get(0), { text: valueAccessor()});
        
        span.click(function(){
            input.width(span.width());
            span.hide();
            input.show();
            input.focus();
        });
        
       ...