Data and Bindings - Metro Revealed: Building Windows 8 Apps with HTML5 and JavaScript - page 17

Chapter

2

Data and Bindings

In this chapter, I show you how to define and use the data that forms the core of a Metro applica-
tion. To do this, I will be loosely following the view model pattern, which allows me to cleanly
separate the data from the HTML that is used to present it to the user. This makes applications
easier to write, test, and maintain.
You may already be familiar with models and view models from design patterns such as Model-
View-Controller (MVC) and Model-View-View Controller (MVVC). I am not going to get into the
details of these patterns in this topic. here is a lot of good information about MVC and MVVC avail-
able, starting with Wikipedia, which has some very balanced and insightful descriptions.
I find the benefits of using a view model to be enormous and well worth considering for all
but the simplest Metro projects, and I recommend you seriously consider following the same
path. I am not a pattern zealot, and I firmly believe in taking the parts of patterns and tech-
niques that solve real problems and adapting them to work in specific projects. To that end, you
will find that I take a pretty liberal view of how a view model should be used.
This chapter is largely focused on the behind-the-scenes plumbing in a Metro app. I start
slowly, showing you the conventions for adding JavaScript code to a Metro project and how to
use the Metro JavaScript features to reduce global namespace pollution. From there, I define a
simple view model and demonstrate different techniques for bringing the data from the view
model into the application display. This chapter is all about creating a solid foundation for a
Metro app and getting to grips with the core Metro JavaScript functionality. Table 2-1 provides
the summary for this chapter.

Creating the JavaScript File
The first step is to create a new JavaScript file. Unlike a web app, there is no reason to reduce the
number of JavaScript files in a Metro application because they are already resident on the user's
computer when the application is started. This means I don't have to concatenate files or worry
about minimizing code to reduce the size of script files. Instead, I can create separate files for
each main application feature.
Add a new file by right-clicking the js folder in the Solution Explorer window and selecting
Add ➤ New Item from the menu. Select JavaScript File from the list, set the name to viewmodel.
js , and click the Add button to create the file. Visual Studio will add a new empty file to the
project and open it for editing. Add the statements shown in Listing 2-1.

4