Backbone: Model-to-template and template-to-model binding

Question

I am in the process of integrating Backbone and Backbone.Marionette into an existing web application project. We plan to leave all the existing functionality in project alone for now but any new functionality we will take advantage of Backbone structuring and Marionette principals. One of the first order of business is to decided on an HTML template rendering library as well as a data binding solution for these templates. Previously, we have been using JsRender and JsViews for all our templating needs and data binding but we are willing to explore new avenues for our new functionality. So basically I have been researching various solutions and now need some advice or thoughts on what to choose. Here is what i have looked at so far:

Backbone.StickIt:

Pros: Seems to follow Backbone's idea of separation on concerns which helps keep your templates very "clean".

Cons: Looks like you have to write a bit more code in your views to define bindings. Also, seems to lack the ability to do conditional rendering so you have to always render the full template and just toggle the display of certain elements.

Rivets.js:

Pros: Handles a bit more data binding options within the template without making it too messy.

Cons: Also, seems to lack conditional rendering.

Knockback/Knockout:

Pros: Handles all kinds of data binding needs through attributes.

Cons: Easy to start "dirtying" the template with converters. Have to add another step to create Knockout view-models from Backbone models.

JsViews:

Pros: Similar to Knockout's abilities but with different syntax. Handles conditional rendering.

Cons: In the past we dirtied our templates by adding too much business logic within the template but that may be an issue with our development that we can correct. Need to create functionality to tie JsViews observability functionality to Backbone model events. Other libraries like StickIt and Knockback automatically handle this.

We also looked into Backbone.ModelBinder which is somewhere in-between StickIt and Rivets.

Can anyone share any decisions they have made and why they chose one plugin/library over another? I'm also open to other suggestions as well. Thanks.

Answer 1

I've used these

Mustache.js

Pro's: Not only does mustache support variable binding, but it can alsoo handle function binding. For example you can have

<a href="{{test}}" >click me </a>

And then in your view have a method called test. This saves alot of rendundant assigning class/id to link, and bind event in the View class.

Con's: I don't like the syntax of it.

Next I use coffeescript in Ruby on Rails, which has a build in jst eco templating system. a pro is, you have the templates in seperate files. On pageload they get bind to a global variable in the dom. These are minified and is way better then some pseudo script template tag. Another pro is, you write if else and for loops like you do in ruby. The downside is, they use razor tags and don't allow easy mixin with serverside code (like a translation).

Other library is ofcourse is underscores templating engine. Very simple, but quite powerful. Proside, you already have it available (underscore is needed for backbone). Downside is, you can't (by default) load a template from an external file. I've solved this by using serverside code (require_once, render partial). If you use require.js however, together with the text plugin (http://requirejs.org/docs/download.html#text) then you can load templates as a dependency.