HTML and CSS Reference
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
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
the summary for this chapter.
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
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.