locked
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?

    Friday, December 14, 2012 12:49 AM

Answers

  • 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.

    • Marked as answer by w-p Tuesday, December 18, 2012 5:58 AM
    Monday, December 17, 2012 7:11 AM
    Moderator

All replies

  • 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.

    • Marked as answer by w-p Tuesday, December 18, 2012 5:58 AM
    Monday, December 17, 2012 7:11 AM
    Moderator
  • Thanks Steven.
    Tuesday, December 18, 2012 6:11 AM