data binding question - what happen when data model changes?

Question

This is probably a very basic question.

When we bind a data, and the data is changed, does that change the display on ui as well?

let's say we bind data using this

data-win-bind="textContent: title"

eg. 

<h4 class="item-title" data-win-bind ="textContent: title"></h4>

after binding is done, we change the object's title.  will the ui display on this h4 automatically change?

Answer 1

Hi w-p,

For javascript based Windows STore app, it depends on whether the js objects (you will bind to WinJS controls or html elements) are observable objects. By default, normal JSON objects are not observable, so the data binding is one-time (change on data will not be reflected on the data bound UI elements). To make the databinding become one-way (change on data objects will automatically show on data bound UI elements), you need to convert the JSON objects to observable ones. To do such conversion, you can use either "WinJS.Binding.as" method to convert a specific object or use "WinJS.Binding.define" to create a constructor method and create multiple observable objects through the constructor:

#WinJS.Binding.as function (Windows)
http://msdn.microsoft.com/en-us/library/windows/apps/br229801.aspx

#WinJS.Binding.define function (Windows)
http://msdn.microsoft.com/en-us/library/windows/apps/br229814.aspx

See the following reference for a simple example:

#Quickstart: binding data and styles (Windows Store apps using JavaScript and HTML) (Windows)
http://msdn.microsoft.com/en-us/library/windows/apps/hh700358.aspx

BTW, so far javascript based windows Store app doesn't support two-way databinding.

---

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 2

Thanks Steven.