Editable and saveable data-grid example

Editable and saveable data-grid example

by nickkell

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.2.0.debug.js"></script>
<table>
    <thead>
        <tr>
            <th>
                Field 1
            </th>
             <th>
                Field 2
            </th>
            <th>
                Field 3
            </th>
        </tr>
    </thead>
    <tbody data-bind="foreach: items">
        <tr  data-bind="click: $root.editingItem">
            <!-- ko if: $data === $root.editingItem() -->
                <td>
                     <input type="text" data-bind="value: field1" />
                   </td> 
                    <td>
                     <input type="text" data-bind="value: field2" />
                </td>
            <td>
                <select data-bind="value: field3, options: $root.field3PossibleValues"></select>
            </td>
            <td>
                <input type="button" value="save" data-bind="click: save" />
            </td>
            <!-- /ko -->
                                <!-- ko if: $data !== $root.editingItem() -->
                    <td data-bind="text: field1">

                   </td> 
                    <td data-bind="text: field2">

                </td>
                <td data-bind="text: field3">
                </td>
                                <!-- /ko -->            
        </tr>
    </tbody>
</table>

JavaScript

function ViewModel() {
    function produceEditableItem(index) {
        return {
            field1: index + 'field1',
            field2: index + 'field2',
            field3: ko.observable(1),
            save: function(item) {
                alert('saved item with field1: ' + item.field1 + '; field2: ' + item.field2 + ';field3: ' + item.field3());
            }
        };
    }

    var self = this;

    self.field3PossibleValues = ko.observableArray([1, 2, 3]);

    self.items = ko.observableArray([]);

    (function() {
        var i = 0,
            items = [];
        for (; i < 10; i++) {
            items.push(produceEditableItem(i));
        }

        self.items(items);
    }());

    self.editingItem = ko.observable();

}


$(document).ready(function() {

    ko.applyBindings(new ViewModel());

});