Simple inline editing with knockoutjs - part 2

Part 2 of 2

HTML

<script src="http://addyosmani.github.com/todomvc/architecture-examples/knockoutjs/js/app.js"></script>
<div data-bind="liveEditor: value">
    <span class="view"><a href="#" data-bind="click: value.edit, text: value() || 'Click to edit value 1'"></a></span>
    <input class="edit" data-bind="value: value, 
        enterKey: value.stopEditing, 
        selectAndFocus: value.editing, 
    event: { blur: value.stopEditing }" />
</div>
<div data-bind="liveEditor: someOtherValue">
    <span class="view"><a href="#" data-bind="click: someOtherValue.edit, text: someOtherValue() || 'Click to edit value 2'"></a></span>
    <input class="edit" data-bind="value: someOtherValue, 
        enterKey: someOtherValue.stopEditing, 
        selectAndFocus: someOtherValue.editing, 
    event: { blur: someOtherValue.stopEditing }" />
</div>

CSS

.edit {
    display: none;    
}

.editing .edit {
    display: block;    
}

.editing .view {
    display: none;
}

JavaScript

ko.extenders.liveEditor = function (target) {
    target.editing = ko.observable(false);

    target.edit = function () {
        target.editing(true);
    };

    target.stopEditing = function () {
        target.editing(false);
    };
    return target;
};

ko.bindingHandlers.liveEditor = {
    init: function (element, valueAccessor) {
        var observable = valueAccessor();
        observable.extend({ liveEditor: this });
    },
    update: function (element, valueAccessor) {
        var observable = valueAccessor();
        console.log("Edit!");
        ko.bindingHandlers.css.update(element, function () { return { editing: observable.editing }; });
    }
};

var viewModel = {
    value: ko.observable(),
    someOtherValue: ko.observable() 
};

ko.applyBindings(viewModel);