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

Wrapping a function in parentheses and then adding another pair of parentheses immedi-
ately afterward causes the function to be defined and then executed right away. Any variables
you define inside the function are scoped to the function itself and don't pollute the global
namespace. When the function has been executed, the JavaScript runtime automatically cleans
up any variables that have not been exported globally.

Using Strict Mode
he “use strict” statement applies some constraints on the way you can use JavaScript. One
constraint is that it becomes an error to implicitly create a global variable in a function. You
implicitly create a global variable when you don't use the var keyword:
var color1 = "blue"; // OK - scope is local to function
color2 = "red"; // Not OK - this is a global variable

The JavaScript runtime will generate an error if you define a variable that is implicitly
global. Using strict mode is entirely optional, but it is good practice, and it disables some of the
more dangerous and odd JavaScript behaviors. You can get full details of the changes that strict
mode enforces by reading Appendix C of the ECMAScript Language Specification at www.ecma-
international.org/publications/files/ECMA-ST/Ecma-262.pdf .

Returning to the View Model
Now that I have explained the context and conventions of a Metro JavaScript file, I can turn to the
definition of the view model. The view model for the example Metro application will be simple, and
this part of it, represented by the ViewModel.UserData object, will contain the data that is specific to
the user: the user's home zip code, their grocery list, and the stores from which they buy groceries.
I defined two arrays that will hold details of the items on the shopping list and the user's pre-
ferred stores, _shoppingItems and _preferredStores . These properties are not exported as part
of the ViewModel.UserData object because they start with an underscore. To provide access to the
data, I have defined a set of functions that return the array data and that accept new items to be
added to the arrays. he homeZipCode property is public and forms part of the globally available
ViewModel.UserData object. You can read and change the value of this property directly.

■ The shape and structure of the UserData object are a little odd because I want to
show different aspects of the WinJS API. In a real project, you would treat the data items in a
more consistent manner.

Note

So that there is some data to work with in the application, I have added some statements
to the self-executing function to define a zip code, add some stores, and put a few simple items
on the shopping list:

ViewModel.UserData.homeZipCode = "NY 10118";

ViewModel.UserData.addStore("Whole Foods");
ViewModel.UserData.addStore("Kroger");

f