{"id":136,"date":"2015-03-25T22:12:08","date_gmt":"2015-03-25T21:12:08","guid":{"rendered":"http:\/\/www.vosseburcht.com\/?p=136"},"modified":"2015-03-25T22:12:08","modified_gmt":"2015-03-25T21:12:08","slug":"winjs-navigation-and-knockoutjs-expanding-the-to-do-sample","status":"publish","type":"post","link":"https:\/\/vosseburchttechblog.azurewebsites.net\/index.php\/2015\/03\/25\/winjs-navigation-and-knockoutjs-expanding-the-to-do-sample\/","title":{"rendered":"WInJS Navigation and KnockoutJS, expanding the to-do sample"},"content":{"rendered":"

I was planning to expand my to-do sample with some more WinJS controls to weed out any bugs that might still be present in the knockout-winjs integration library. After thinking of some controls I would like to test out I figured I would need more than just the single page currently in the sample app. And that of course means some way to navigate between them.<\/p>\n

WinJS comes with a navigation stack built-in, and it would be ridiculous not to use that. However a “simple” sample I found online (this one<\/a>) turned out less simple than I expected. After some digging through the code however I found that for my simple purpose I could strip most of the plumbing and get something actually simple. So first we will set up some plumbing and then add a to-do item edit page.<\/p>\n

I’m building on the outcome of my last blog post: ToDoApp2<\/a><\/p>\n

Setting up the navigation plumbing<\/h2>\n

A few changes to the way we initialize the application:<\/p>\n

function onDeviceReady() {\n  \/\/ Handle the Cordova pause and resume events\n  document.addEventListener('pause', onPause, false);\n  document.addEventListener('resume', onResume, false);\n\n  ConcreteCoding.KnockoutToWinJS.addBindings(ConcreteCoding.KnockoutToWinJS.controls);\n\n  \/\/ When we navigate to a page, this event listener will render it, and apply our knockoutjs bindings.\n  WinJS.Navigation.addEventListener(\"navigated\", (eventObject) => {\n    var url = eventObject.detail.location;\n    var host = document.getElementById(\"pageContent\");\n\n    \/\/ Unload the previous page if needed.\n    if (host.winControl && host.winControl.unload) {\n      host.winControl.unload();\n    }\n    WinJS.Utilities.empty(host);\n\n    eventObject.detail.setPromise(WinJS.UI.Pages.render(url, host, eventObject.detail.state).then(function () {\n      ko.applyBindings(eventObject.detail.state, host);\n    }));\n  });\n\n  WinJS.UI.processAll().then(() => {\n    \/\/ Navigate to the initial page and supply the original view model as the state parameter.\n    return WinJS.Navigation.navigate(\"\/html\/ToDoView.html\", new ToDoViewModel());\n  });            \n}<\/pre>\n
And we also have to extract the page from the index.html into its own ToDoView.html.<\/p>\n
Index.html:<\/p>\n
<!DOCTYPE html>\n<html>\n<head>\n    <meta charset=\"utf-8\" \/>\n    <title>ToDoApp<\/title>\n\n    <link href=\"WinJS\/css\/ui-light.css\" rel=\"stylesheet\" \/>\n    <script src=\"WinJS\/js\/WinJS.js\"><\/script>\n\n    <link href=\"css\/index.css\" rel=\"stylesheet\" \/>\n\n    <script src=\"scripts\/platformOverrides.js\"><\/script>\n    <script src=\"scripts\/knockout-3.3.0.debug.js\"><\/script>\n    <script src=\"scripts\/knockout-winjs.js\"><\/script>\n    <script src=\"scripts\/index.js\"><\/script>\n\n    <script src=\"cordova.js\"><\/script>    \n<\/head>\n<body>\n    <div id=\"pageContent\"><\/div>\n<\/body>\n<\/html><\/pre>\n
ToDoView.html:<\/p>\n
<!DOCTYPE html>\n<html>\n<head>\n    <title><\/title>\n<\/head>\n<body>\n    <input type=\"text\" data-bind=\"textInput: newDescription\" \/>\n    <br \/>\n    <div data-bind=\"foreach: toDoItems\">\n        <input type=\"checkbox\" data-bind=\"checked: done\" \/>\n        <span data-bind=\"text: description\"><\/span>\n        <a href=\"#\" data-bind=\"click: $parent.removeItem.bind($parent, $data)\">x<\/a>\n        <br \/>\n    <\/div>\n\n    <div data-bind=\"winAppBar: {placement: 'bottom'}\">\n        <button data-bind=\"winAppBarCommand: {label: 'Add', type: 'button', icon:'add', onclick: addNewItem }\"><\/button>\n    <\/div>    \n<\/body>\n<\/html><\/pre>\n
Adding the new page with the navigation button<\/h2>\n
So ofcourse we create a new file containing the HTML for the new page. Very simple but using the WinJS BackButton control, because we are using the WinJS navigation stack. I also changed some properties in the ToDoItem class so we have a bit more to fill the page with.<\/p>\n
The new HTML page:<\/p>\n
<!DOCTYPE html>\n<html>\n<head>\n    <title><\/title>\n<\/head>\n<body>\n    <button data-bind=\"winBackButton\"><\/button>\n    <h1 class=\"win-type-xx-large\">Edit item<\/h1>\n    <br \/>\n    <label>Title<\/label>\n    <br \/>\n    <input type=\"text\" data-bind=\"textInput: toDoItem().title\" \/>\n    <br \/>\n    <label>Done?<\/label>\n    <input type=\"checkbox\" data-bind=\"checked: toDoItem().done\" \/>\n    <br \/>\n    <label>Description<\/label>\n    <br \/>\n    <textarea data-bind=\"textInput: toDoItem().description\"><\/textarea>\n<\/body>\n<\/html><\/pre>\n
The new view model class for the above view, and the new ToDoItem class:<\/p>\n
class EditToDoItemViewModel {\n    toDoItem: KnockoutObservable<ToDoItem>;\n\n    constructor(item: ToDoItem) {\n        this.toDoItem = ko.observable(item);\n    }\n}\n\nclass ToDoItem {\n    title: KnockoutObservable<string>;\n    description: KnockoutObservable<string>;\n    done: KnockoutObservable<boolean>;\n\n    constructor(title: string) {\n        this.title = ko.observable(title);\n        this.description = ko.observable(\"\");\n        this.done = ko.observable(false);\n    }\n}<\/pre>\n
Finally we add an editItem method that handles navigating to our new page, we place it in the ToDoViewModel class. This method should also be data bound on a button or link for each to-do item in the main page, but I’ll leave that as an exercise for the reader (or you can just download the complete project at the end of the post):<\/p>\n
editItem(item: ToDoItem) {\n    WinJS.Navigation.navigate(\"\/html\/EditToDoItemView.html\", new EditToDoItemViewModel(item));\n}<\/pre>\n
Now just run it, and you should be able to add items, edit them in a separate edit page, and navigate back to the original page. The complete project can be found here: ToDoApp3<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
I was planning to expand my to-do sample with some more WinJS controls to weed out any bugs that might still be present in the knockout-winjs integration library. After thinking of some controls I would like to test out I figured I would need more than just the single page currently in the sample app. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/vosseburchttechblog.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/posts\/136"}],"collection":[{"href":"https:\/\/vosseburchttechblog.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vosseburchttechblog.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vosseburchttechblog.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vosseburchttechblog.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/comments?post=136"}],"version-history":[{"count":0,"href":"https:\/\/vosseburchttechblog.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/posts\/136\/revisions"}],"wp:attachment":[{"href":"https:\/\/vosseburchttechblog.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/media?parent=136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vosseburchttechblog.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/categories?post=136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vosseburchttechblog.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/tags?post=136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}