CRUD local database with Kendo

by JayData

HTML

<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script src="http://include.jaydata.org/datajs-1.0.3.js"></script>
<script src="http://include.jaydata.org/jaydata.js"></script>
<script src="http://include.jaydata.org/jaydatamodules/kendo.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<div id="form-container">
    <div class="selector">
        <b>Select Task to edit</b>
        <button data-bind="click: newTask">Add new task</button>
        <div data-role="listview" id="taskList" 
            data-bind="source: taskSource, events: { change: taskSelected }" 
            data-selectable="true" data-template="taskTemplate">
        </div>
    </div>
    <script id="taskTemplate" type="text/x-kendo-template">
        <div class="task" data-bind="attr: { class: tileClass }" >
            <span data-bind="text: Todo"></span>
            <a style="float:right"  data-bind="click: removeTask" href="\#">X
            </a>
        </div>
    </script>
    <div class="form" data-bind="visible: showForm">
        <ul>
            <li>
                <label>ID</label> <span data-bind="text:selectedTask.Id"></span>
            </li>
            <li>
                <label>Todo</label>
                <input type="text" class="k-textbox" id="products" 
                        data-bind="value: selectedTask.Todo" />
            </li>
            <li>
                <label>Completed</label>
                <input type="checkbox" 
                       data-bind="checked: selectedTask.Completed" />
            </li>
        </ul>
    </div>
</div>

CSS

.task {
    border:1px solid silver;
    margin-top:5px;
    margin-left: 5px;
    width:150px;
    height:50px;
    display: inline-block
}
.completed-task {
    border: 2px solid green;
    margin-top:5px;
    margin-left: 5px;
    width:150px;
    height:50px;
    display: inline-block
}
.active-task {
    border: 2px solid red;
    margin-top:5px;
    margin-left: 5px;
    width:150px;
    height:50px;
    display: inline-block
}

JavaScript

$(function () {
                var Task = $data.define("Task", {
                    Todo: {
                        type: String,
                        required: true
                    },
                    Completed: Boolean
                });

                var KendoTask = Task.asKendoModel();
                KendoTask.fn.tileClass = function () {
                    return (this.get("Completed") ? "completed-task" : "active-task");
                }

                var viewModel = kendo.observable({

                    taskSource: new kendo.data.ObservableArray([], Task.asKendoModel()),
                    selectedTask: null,
                    taskSelected: function (e) {
                        var selectedIndex = $(e.sender.select()).index();
                        viewModel.set("selectedTask", viewModel.taskSource[selectedIndex]);
                    },

                    newTask: function () {
                        var newTask = new Task({
                            Todo: 'untitled'
                        });
                        newTask.save().then(function () {
                            viewModel.taskSource.push(newTask.asKendoObservable());
                            var list = $('#taskList').getKendoListView();
                            list.select(list.element.children().last());
                        });
                    },
                    removeTask: function (e) {
                        var task = e.data;
                        task.remove().then(function () {
                            viewModel.taskSource.splice(viewModel.taskSource.indexOf(task), 1);
                            viewModel.set("selectedTask", null);
                        });
                        return false;
                    },
                    showForm: function () {
                        return this.get("selectedTask") !== null;
                    },
                });

                viewModel.taskSource.bind("change",...