Data Binding in “single-page-multiple-views” web apps

Question

There are a number of popular frameworks around to provide data binding between objects and views. This is a great idea; when the data changes, the view is updated automagically and vice versa. However, in mobile web apps, wrapped with Phonegap or equivalent, the app usually consists of one single html page holding multiple "views" (usually divs used as containers). Only one view is displayed at a time, which means that only data bindings belonging to the current view need to be calculated and updated. If all views are updated all the time, it means a lot of unnecessary calculation and updates of invisible DOM elements. This should be avoided, since performance often is a problem in these apps.

What is the case with current JS frameworks? How do they handle this? I am especially interested in Angular.JS, but if there are other frameworks that handle the issue better, I am very curious to know.

Answer 1

You can try knockout.js . Knockout allows you to data-bind subset of elements on your page