javascript frameworks: What are UI bindings and composed views?

Question

I'm reading this:

http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/

I'm using backbone.js. I love it, though it requires too much boilerplate. Anyway.

The author of the post seems to put great importance on UI-bindings and composed view.

I think I know the basic advantage of ui bindings, you can change small parts of the view as the model changes without re-rendering the entire view. I don't necessarily see the point though. If your view is huge maybe you should make smaller views? I've seen knockoutjs's code and it's littered with ugly data-bind stuff. How does emberjs handle it? Is there an example?

I have no idea what he means by composed views, could someone elucidate?

Composed Views - Like all software developers, I enjoy creating modular reusable code. For this reason, when programming UI, I would like to be able to compose views (preferably at the template layer). This should also entail the potential for a rich view component hierarchy. An example of this would be a reusable pagination widget.

Is there an example?

Thanks

Edit:

Would this help make something like composed Views?

https://github.com/tbranyen/backbone.layoutmanager

Answer 1

Composed views are used to divide the view into small blocks which can be reused or adapted to different scenarios.

For example, in a form where you are editing a user, you could create a view for the address field and just call it from the main page/template. The author mentions pagination as an example too, in this case you could create a model that knows how to handle retrieving data as you switch between pages and just apply it to a table in your page.

Regarding the "ugly" data-binding code, backbone needs to know how to attach itself to the existing markup and how to modify it when an event occurs.

Maybe this example will help: http://coenraets.org/blog/2011/12/backbone-js-wine-cellar-tutorial-part-1-getting-started/

Answer 2

Traditional web pages are monolithic. User calls a page and server constructs the page and browser renders it. Here author is referring to breaking down that kind of code in to a set of views. So your page is made up of multiple parts. And each part gets rendered and updated independently. Or one model change can trigger a series of updates on some or all parts.

Basically this allows you to create 'desktop' kind of applications on web. And you don't have to resort to iframe hacks to do this.

Gmail and Google Reader are good examples of web applications built with composed views.