After my post yesterday about making KnockoutJS and WinJS work together I figured it would be a good idea to make a nice sample application to show everything works. And why not user Cordova in the process.

So here is a very simple ToDo sample I created for a knowledge sharing session at the office. Which I will ‘enhance’ with WinJS stuff: ToDoApp1

It is very simple, and it doesn’t even save your to-do items but it shows off some knockout JS stuff, and that was the point.

What I did was change the Add button to a button on a WinJS AppBar and bind the onclick handler to the exact same method that was used before. Apart from adding the WinJS nuget package, the WinJS typescript definition files and the knockout-winjs library from my previous post to the project (and referenced in the HTML file), I only changed a few simple things:

Added this piece of HTML at the end of the body:

<div data-bind="winAppBar: {placement: 'bottom'}">
    <button data-bind="winAppBarCommand: {label: 'Add', type: 'button', icon:'add', onclick: addNewItem }"></button>
</div>

Changed the onDeviceReady method to register the WinJS control binding handlers and add the WinJS.UI.processAll method to start the WinJS magic:

function onDeviceReady() {
  // Handle the Cordova pause and resume events
  document.addEventListener('pause', onPause, false);
  document.addEventListener('resume', onResume, false);

  ConcreteCoding.KnockoutToWinJS.addBindings(ConcreteCoding.KnockoutToWinJS.controls);

  WinJS.UI.processAll().then(() => {
    ko.applyBindings(new ToDoViewModel());
  });            
}

I also added a little padding to the body in CSS because the WinJS style sheets put everything frighteningly close to the edges of the screen. But I’ll leave that to your imagination. Or you can download the entire project from here: ToDoApp2

I’ll try to add some more WinJS controls to this little sample to test them out (and if needed fix the knockout-winjs library in the process). So keep an eye out.