KO Template

by ZenMaster

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0rc.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<div id="root">
    <table>
        <tbody data-bind="foreach: events">
            <tr>
                <td>
                    <input type="text" data-type="name" data-bind="value: name, css: {hidden: !editing()}, hasFocus: isFocused">
                </td>
                <td>
                    <input type="text" data-type="method" data-bind="value: age, css: {hidden: !editing()}">
                </td>
            </tr>
        </tbody>
    </table>
</div>

CSS

table {
  border: 1px solid #cdcdcd;
  border-collapse: collapse;
  font-size: 14px;
}
table input {
    margin: 2px;
    padding: 2px;
    border: 1px solid #bbb;
}
table input.hidden {
    border: 1px solid transparent;
    background: none;    
}

JavaScript

var $root = $('#root');

var data = {                
    events: [
        {name: 'aaa', age: '22'},
        {name: 'bbb', age: '33'},
        {name: 'ccc', age: '44'}
    ]
};

var mapping = {
    events: {
        key: function(data) {
            return ko.unwrap(data.name);
        },
        create: function(options) {
            var item = ko.observable(options.data);
            item.editing = ko.observable(false);
            console.log(item);
            item.isFocused = ko.computed(function() {
                return this.editing();
            }, item);
            return item;
        }
    }
};

var observable = ko.mapping.fromJS(data, mapping);

ko.applyBindings(observable, $root[0]);