Kendo UI Mobile MasterDetail KO

by marhaba

HTML

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.js"></script>
<div data-role="view">
    <header data-role="header">
        <div data-role="navbar">Tasks</div>
    </header>
    <ul id="taskList" data-role="listview" data-bind="foreach: tasks">
        <li><a data-bind="text: taskName, attr: { href: '#taskDetail?id=' + id }"></a></li>
    </ul>
</div>

<div data-role="view" data-layout="layout" id="taskDetail" data-transition="slide" data-show="showDetails">
    <header data-role="header">
        <div data-role="navbar">
            <a data-align="left" class="nav-button" data-role="backbutton">Back</a>
            Task Detail
        </div>
    </header>
    
    <p>Want to display *selected* task with all details here!</p>
    <ul data-role="listview" data-style="inset" data-bind="with: selectedTask">
        <li>Task Name: <span data-bind="text: taskName"></span></li>
        <li>Is Complete: <span data-bind="text: isComplete"></span></li>
        <li>Due Date: 7/4/2012</li>
    </ul>
</div>

JavaScript

window.kendoMobileApplication = new kendo.mobile.Application();

var data = [
    { id: 1, taskName: "Clean Kitchen", isComplete: false},
    { id: 2, taskName: "Go Shopping", isComplete: true},
    { id: 3, taskName: "Paint Living room", isComplete: false},
    { id: 4, taskName: "Write blog post", isComplete: false}
];

function ViewModel() {
    var self = this;
    self.tasks = ko.observableArray(data);
    self.selectedTask = ko.observable(null);
}

var viewModel = new ViewModel();
ko.applyBindings(viewModel);

function showDetails(e) {
    var task = ko.utils.arrayFirst(viewModel.tasks(), function(item) {
        return item.id == e.view.params.id;
    });
    viewModel.selectedTask(task);
}