JSFiddle - React, Tailwind, and code Playground

by olegatilla

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div class="Label">Editable Div:</div>
<span contenteditable="true" data-bind="editableText: firstName"></span>
<br />

<div class="Label">Standard Input:</div>
<input type="text" data-bind="value: firstName" >
<br />

<button id="click" data-bind="click: click">
Click
</button>

CSS

.Label {
    font-family: arial;
    font-weight: bold;
    font-size: 14px;
}

JavaScript

//Editable Text Custom Binding
ko.bindingHandlers.editableText = {
    init: function (element, valueAccessor) {
        $(element).on('blur', function () {
            var observable = valueAccessor();
            observable($(element).text());
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor, data) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).text(value);
    }
};

//Knockout ViewModel
function viewModel(){
    this.firstName = ko.observable();
    this.click = function () {
    		alert(this.firstName());
    }
}

ko.applyBindings(new viewModel());
//vm.loadName();