What is it?
Cats and Dogs Living Together – Mass Hysteria!
Hang tight! If you just want the Windows 8 Metro Style App soure code grab it now.
Setting up KnockoutJS
The first thing you will need to do is grab the latest version of KnockoutJS off GitHub. I’ve included and tested with both the stable 2.0.0 release as well the 2.1.0rc update.
Create a new project in Visual Studio 11 Express as usual and then add the Knockout.js file to your JS folder.
Note that Visual Studio will do this automatically for you if you simply drag the .js file over to your code window.
Next, you will need to add a reference to the KnockoutJS file in the html source. While we are at it let’s go ahead and grab the latest jQuery Library as well. Some of the KnockouJS Learning samples assume jQuery is included. Your references should look like below:
This will ensure your DOM is loaded and now accessible inside of your app.
The last step now is to ensure that all of our KnockoutJS bindings occur once our initialize function has been called. Here is an example of what I mean:
Converting Learn.KnockoutJS samples to a Metro Style Apps
There are some really great tutorials on Learn.KnockoutJS.com to help get you started. I decided to go through each of those and bring them over into a Metro Style App.
All five tutorials came over with minor tweaks except for Single Page applications. I’ve named the tutorials using the following convention:
- Introduction – default.html/default.js
- Working with Lists and Collections – seats.html/seats.js
Single page applications – spa.html/spa.js
- Didn’t work. I’ve included the source so if anyone wants to hack on it some more and see what’s up please let me know.
- Creating custom bindings – custom.html/custom.js
- Loading and saving data – data.html/data.js
To change which sample you want to run just edit the startup page inside the project properties.
No tweaks needed this came over perfectly. Here is what my html looks like:
Working with Lists and Collections Example
Worked right out of the box. Here is the HTML:
Creating Custom Bindings Example
I needed to do two things to get this example to work. The first one was to include jQuery it assumes it would be present. The second was to replace the alert() function call (this doesn’t exist in WinRT) with a native WinRT MessageDialog. Here is what the HTML looks like:
Loading and Saving Data Example
Only thing I had to add here was jQuery due to the dependency on it. Here is the HTML:
You may also want to check out my previous Windows 8 Metro Style Development Tips: