Knockout with inline editor

by smichelotti

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.3.0beta.debug.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css">
<table>
    <tr>
        <th>Name</th>
        <th>Is Complete</th>
        <th></th>
    </tr>
    
    <!-- ko foreach: tasks -->
    <tr>
        <td><span data-bind="text: Name"/></td>
        <td><span data-bind="text: IsComplete"/></td>
        <td><button class="edit-item">Edit</button></td>
    </tr>
    <!-- /ko -->
</table>

<div id="taskDialog" data-bind="with: selectedTask">
    Task Name: <input type="text" data-bind="value: Name" />
</div>

JavaScript

var fakeData = [{ Id: 1, Name: "Task1", IsComplete: false }, 
                { Id: 2, Name: "Task2", IsComplete: false }, 
                { Id: 3, Name: "Task3", IsComplete: true }];
                
$(function() {
    $("#taskDialog").hide();
    
    var viewModel = {
        tasks: ko.observableArray(fakeData),
        selectedTask: ko.observable(fakeData[0])
    };
    
     $(".edit-item").live("click", function () {
        viewModel.selectedTask(ko.dataFor(this));
        $("#taskDialog").dialog({
            buttons: {
                Save: function () {
                    console.log("in save");
                    $(this).dialog("close");
                },
                Cancel: function () {
                    console.log("in cancel");
                    $(this).dialog("close");
                }
            }
        });
    });

    ko.applyBindings(viewModel);
});