JSFiddle - React, Tailwind, and code Playground

by amitava82

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<div>
    <span class="editField">
        <span data-bind="text: Address1">Click here to edit</span>
        <input type="text" data-bind="clickEditor: Address1">
    </span>
</div>

JavaScript

ko.bindingHandlers.clickEditor = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {        
        var $element = $(element).hide();
        var $text = $element.prev();
        var $buttons = $("<span class='editConfirm'> \
                    <button class='saveEdit' type='button'>Save</button> \
                    <button class='cancelEdit' type='button'>Cancel</button> \
                </span>").hide().insertAfter($element);
        var $editElements = $buttons.add($element);

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $buttons.remove();
        });

        var _toggle = function(edit) {
            $text[edit? 'hide' : 'show']();
            $editElements[edit? 'show' : 'hide']();
        }

        $text.click(function(e) {
            _toggle(true);
        });
        
        $editElements.find('.saveEdit').click(function() {
            _toggle(false);
            valueAccessor()($element.val());
        });

        $editElements.find('.cancelEdit').click(function() {
            _toggle(false);
            $(element).val(ko.utils.unwrapObservable(valueAccessor()));
         });
    }
    , update: function (element, valueAccessor) {
        $(element).val(ko.utils.unwrapObservable(valueAccessor()));
    }
};

$(document).ready(function() {
    var helpText = "Click here to edit";

    function appViewModel() {
        this.Address1 = ko.observable(helpText);
    }
    ko.applyBindings(appViewModel());

});