Simple inline editing with knockoutjs - part 1

Part 1 of 2.

HTML

<div class="editor" data-bind="css: { editing: editing }"> 
    <div class="view" data-bind="event: { click: editItem }, text: item() || 'Double click to edit'"> 
       <a href="#"></a>Click to add
    </div>
    <input class="edit" type="text" data-bind="value: item, event: { blur: stopEditing }" /> 
</div>

CSS

.edit {
    display: none;    
}

.editing .edit {
    display: block;    
}

.editing .view {
    display: none;
}

JavaScript

var viewModel = {
    //the item we're editing
    item: ko.observable(22),
    
    //track whether we are editing
    editing: ko.observable(),
    
    // edit an item
    editItem: function() {
        this.editing( true );
    },
    
    // stop editing an item. 
    stopEditing: function() {
        this.editing( false );
    }
}; 

ko.applyBindings(viewModel);