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

ViewModel.UserData.addStore("Kroger");
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");
})();
The change here is subtle but important. The WinJS.Binding.as takes an object as its argu-
ment and returns an object whose simple properties are observable. A simple property is one
where the value is primitive, such as a number or a string. Properties whose values are objects,
arrays, or functions are not simple and are not made observable by the as method.
he WinJS.Binding.as method replaces data properties with getters and setters that trig-
ger notifications when the property value change. Properties that refer to objects, arrays, or
functions are left unchanged by the as method. (I explain how to handle arrays later in this
chapter.)
You must call the as method on objects, rather than on properties or simple values. If you
call WinJS.Binding.as directly on a property, you will simply get back the property value, and
any bindings that use the property won't automatically update:
// this will NOT update
var myObject={
myObservableValue: WinJS.Binding.as("MyInitialValue")
};
// this WILL update
var myOtherObject=WinJS.Binding.as({
myObservableValue: "MyInitialValue"
});
No error is reported when you try to create an observable value using the first approach.
WinJS just quietly ignores the request, and you get a static binding. Following the second tech-
nique will allow you to create bindings that update when the value changes.
Combining Namespaces with Observable Items
There are occasions when the WinJS API creates the impression that different development
teams could have coordinated their efforts more carefully. One such example comes when try-
ing to create an observable data item on an object that is exported globally using the WinJS.
Namespace.define method.
he WinJS.Binding.as method adds a number of private members to an object when it
processes the simple properties, following the common convention of prefixing the names of
these members with an underscore. But, as I explained, the WinJS.Namespace.define method
won't export these members globally. To get around this conflict, I have adjusted the way that I
create my ViewModel.UserData object, as Listing 2-5 shows.
Listing 2-5. Adjusting the Structure of a Global Object to Export Private Members
…
WinJS.Namespace.define("ViewModel", {
UserData: WinJS.Binding.as({