JS template system with Backbone.js support

Question

I am looking at some good template systems that will be used with the MVC framework, like Backbone.js

I know one such system (jQuery Templating). However, the same has been discontinued for some reason, and therefore I am considering some other good options.

Please suggest something flexible enough in terms of perspective. (for example, dynamic browsing with an on / off button based on some logic, tabular data with different styles based on some logic, etc.)

Answer 1

You have an underscore pattern system out.

Example:

# code simplified and not tested var myView = Backbone.View.extend({ template: _.template( "<h1><%= title %></h1>" ), render: function(){ this.$el.html( this.template({ title : "The Title" }) ); return this; } }); 

All templated systems you can find have integrations like this one.

Of course, this is a simplified example, usually the template is served using this.model.toJSON() , you can also find tricks to declare the body of the template in <script> , and you can use Mustache syntax instead of ERB .

Answer 2

I really like Handlebars.js ...

Here are some javascript ...

 var HandlebarsView = Backbone.View.extend({ el: '#result' initialize: function(){ this.template = Handlebars.compile($('#template').html()); }, render: function(){ var html = this.template(this.model.toJSON()); this.$el.html(html); } }); var HandlebarsModel = Backbone.Model.extend({}); var model = new HandlebarsModel({ name: 'Joe Schmo', birthday: '1-1-1970', favoriteColor: 'blue' }); var view = new HandlebarsView({ model: model }); view.render(); 

Then html ...

  <div id="result"> </div> <script id="template" type="text/html"> <div>Name:{{name}} Birthday: {{birthday}} Favorite Color: {{favoriteColor}} </div> </script> 

Give it a shot!

Answer 3

I am using haml-coffee along with the rails resource pipeline.
A very exotic choice, but so far it works perfectly.

Inside it looks simple:

 var MyView = Backbone.View.extend({ template: JST['path/to/mytemplate'] render: function(){ var html = this.template(this.model.toJSON()); this.$el.html(html); } })