locked
When do I use Data Binding of Windows 8 Javascript HTML5?

    Question

  •         When do I need to use data binding? Any example scenario?

      In my app, I store data in Json format in a text file. Then I read it and display on a html element. Is this the case to use data binding? What are its advantages instead of just populating innerText of an element?

    I have read data binding articles on Dev center. They explain how to use it. I want to know why and when I use data binding feature of Windows 8?

    Friday, April 19, 2013 9:15 PM

Answers

  • Data binding is typically used to set up an automatic relationship between a data source and one or more UI elements. This is so you can

    1. Simplify the initialization of UI element contents from a data source (one-time binding)
    2. Have the UI elements update whenever the data source changes (one-way binding, which effectively includes one-time)
    3. Have changes in the UI element also be reflected back to the data source (two-data binding, which includes one-way)

    When small bits of UI are involved, you can just as easily do all this manually, just by setting innerText/innerHTML values (or other attributes) within the appropriate event handler. However, when the UI gets more involved, e.g. you're using collections or you're starting to set up relationships to multiple properties of multiple elements, then having a more formalized structure to handle the data-to-UI wiring starts to make a lot of sense. This is really what data-binding is meant for (and really shines when you're dealing with database sources and other large data sets.)

    "Formalized structure" is what you often see referred to in the context of "view models" (e.g. model-view-controller (MVC), model-view-viewmodel (MVVM), and so forth). Those patterns are ones that have developed from data-binding capabilities; they encapsulate a structure wherein data (the model) is managed independently of how it's shaped (view), how it's presented (viewmodel), and how it's manipulated procedurally (controller). These patterns achieve a 'separation of concerns' between data and UI, which is an adjunct to a similar but different separation between markup (HTML), styling (CSS), and code (JS).

    Note that WinJS provides mechanisms for one-time and one-way data-binding, but not two-way; the latter, however, is not too hard to wire up on your own. I talk about all this in Chapter 4 of my book (see link below).

    The bottom line is that data binding is really a best practice, but not a requirement, especially in simple cases.

    Let me know if you have additional questions--it's a good topic to discuss here.


    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and
    JavaScript
    , a free ebook from
    Microsoft Press


    • Marked as answer by SonalMac Friday, April 19, 2013 10:37 PM
    Friday, April 19, 2013 10:09 PM

All replies

  • The main point of databinding is to keep your javascript clean and simple. Especially when you're displaying a list of items and not just one value.

    There's a nice example at Stephen Walthers Blog.

    Friday, April 19, 2013 9:36 PM
  • Data binding is typically used to set up an automatic relationship between a data source and one or more UI elements. This is so you can

    1. Simplify the initialization of UI element contents from a data source (one-time binding)
    2. Have the UI elements update whenever the data source changes (one-way binding, which effectively includes one-time)
    3. Have changes in the UI element also be reflected back to the data source (two-data binding, which includes one-way)

    When small bits of UI are involved, you can just as easily do all this manually, just by setting innerText/innerHTML values (or other attributes) within the appropriate event handler. However, when the UI gets more involved, e.g. you're using collections or you're starting to set up relationships to multiple properties of multiple elements, then having a more formalized structure to handle the data-to-UI wiring starts to make a lot of sense. This is really what data-binding is meant for (and really shines when you're dealing with database sources and other large data sets.)

    "Formalized structure" is what you often see referred to in the context of "view models" (e.g. model-view-controller (MVC), model-view-viewmodel (MVVM), and so forth). Those patterns are ones that have developed from data-binding capabilities; they encapsulate a structure wherein data (the model) is managed independently of how it's shaped (view), how it's presented (viewmodel), and how it's manipulated procedurally (controller). These patterns achieve a 'separation of concerns' between data and UI, which is an adjunct to a similar but different separation between markup (HTML), styling (CSS), and code (JS).

    Note that WinJS provides mechanisms for one-time and one-way data-binding, but not two-way; the latter, however, is not too hard to wire up on your own. I talk about all this in Chapter 4 of my book (see link below).

    The bottom line is that data binding is really a best practice, but not a requirement, especially in simple cases.

    Let me know if you have additional questions--it's a good topic to discuss here.


    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and
    JavaScript
    , a free ebook from
    Microsoft Press


    • Marked as answer by SonalMac Friday, April 19, 2013 10:37 PM
    Friday, April 19, 2013 10:09 PM