<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>
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); }