HTML and CSS Reference
In-Depth Information
ViewModel.UserData.addStore("Costco");
ViewModel.UserData.addStore("Walmart");
ViewModel.UserData.addItem("Apples", 4, "Whole Foods");
ViewModel.UserData.addItem("Hotdogs", 12, "Costco");
ViewModel.UserData.addItem("Soda", "4 pack", "Costco");
Using Data Binding
Data binding
is the mechanism by which you include data from your view model in the HTML that
is displayed to the user. The WinJS API supports binding through the
WinJS.Binding
namespace.
Data binding is the key to being able to use a view model in a Metro app. I recommend investing
time to learn how to use the WinJS binding capabilities fully if you want to build scalable and
robust Metro applications.
■
WinJS data binding isn't as complete or flexible as some of the more widely used web
app JavaScript libraries such as Knockout.js, Backbone, and Angular.js. You can easily use these
libraries in your Metro app, but my recommendation is to take the time to understand the WinJS
alternative and see how the functionality evolves as the final version of Windows 8 approaches.
Tip
Using Basic Declarative Bindings
The simplest way to use bindings is
declaratively
, meaning that you include details of the view
model data directly in your HTML markup. Listing 2-2 shows how I can bind to the
homeZipCode
value in
default.html
.
Listing 2-2.
A Simple Declarative Binding
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MetroGrocer</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.0.6/js/base.js"></script>
<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
<!-- MetroGrocer references -->
<link href="/css/default.css" rel="stylesheet">
<script src="/js/viewmodel.js"></script>
<script src="/js/default.js"></script>
</head>
<body>
<div id="contentGrid">
<div id="leftContainer" class="gridLeft">
Search WWH ::
Custom Search