JSFiddle - React, Tailwind, and code Playground

by nickkell

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<label>Name</label>
<div data-bind="if: editingCustomer()">
    <input type="text" data-bind="dblClick: toggleEdit, value: customer.name"/>
</div>

<div data-bind="if: !editingCustomer()">
    <span data-bind="dblClick: toggleEdit, text: customer.name"></span>
</div>
<label>Client Ref</label>
<div data-bind="if: editingCustomer()">
    <input type="text" data-bind="dblClick: toggleEdit, value: customer.clientReference"/>
</div>

<div data-bind="if: !editingCustomer()">
    <span data-bind="dblClick: toggleEdit, text: customer.clientReference"></span>
</div>

<input type="button" data-bind="click: function(){ editingCustomer(!editingCustomer()); }" value="Change Editing" />
Editing Customer: <span data-bind="text: editingCustomer"></span>
Changed: <span data-bind="text: changed"></span>

JavaScript

ko.dirtyFlag = function(root) {
    var _isDirty = ko.observable(false);

    var result = ko.dependentObservable(function() {
        if (!_isDirty()) {
            ko.toJS(root); //just for subscriptions
        }

        return _isDirty();
    });

    result.subscribe(function() {
        if (!_isDirty()) {
            _isDirty(true);
        }
    });

    return result;
};

ko.bindingHandlers.dblClick = {
    init: function(element, valueAccessor) {
        var $element = $(element);
        var func = ko.utils.unwrapObservable(valueAccessor());
        $element.dblclick(function() {
            func();
        });
    }
};

var viewModel = {
    editingCustomer: ko.observable(false),
    toggleEdit: function() {
        viewModel.editingCustomer(!viewModel.editingCustomer());
    },
    customer: {
        name: ko.observable("Nick"),
        clientReference: ko.observable("CLIENT12345")
    }
};

viewModel.changed = ko.dirtyFlag(viewModel.customer);
$.extend(viewModel.mutableCustomer,viewModel.Customer);

ko.applyBindings(viewModel);