JS templating system with Backbone.js

Question

I am looking at some good templating systems to be used alongwith an MVC framework like Backbone.js

I am aware of one such system (jQuery Templating). However, the same has been discontinued for some reasons and hence I am looking at some other good options.

Please suggest something which is flexible enough from a view perspective. (e.g. a dynamic view with enabled/disabled button based on some logic, tabular data with different styles based on some logic, etc)

Born

i would suggest mustache.github.com. – Doggy

There are a number of templates you can use, including the one that comes with underscore.js. One of my personal favorites is handlebars.js : handlebarsjs.com – Jolynnjon

If you like Coffeescript, and are also looking for a build system to pull it all together: brunch is nice. brunch.io Uses (by default, can be changed) eco for templating. – Mainz

Could you please provide some good basic examples of using the templating system with Backbone.js, so that I can get a good idea.. – Born

Answer 1

You have out of the box Underscore's template system.

With 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 the template systems you can find have an integration similar to this.

Of course this is a simplified example, normally the template is fed with the this.model.toJSON(), also you can find tricks to declare the template body into an <script> tag, and you can use Mustache syntax instead of ERB.

Vigil

In fact if you're using JSP or ASP on your front-end, you'll have to do something like: _.templateSettings = {interpolate : /\{\{(.+?)\}\}/g, evaluate: /\{%([\s\S]+?)%\}/g, escape: /\{%-([\s\S]+?)%\}/g}; – Bookerbookie

That's pretty succinct – Zachar

Answer 2

I really like Handlebars.js...

Here's 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 the html...

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

Give that a shot!

Recede

Thx alot...seems to be really interesting..as i am new to MVC based frameworks, could u briefly explain me how the code works exactly...like what the new HandleBarsView, etc is doing.... – Born

Also what the this inside View refer to ? – Born

The .extend() method is built into Backbone. It is how you subclass the Backbone base classes. So he has defined two classes HandlebarsView and HandlebarsModel. Then he creates an instance of each, then tells the view to render() itself. – Pyrrhotite

Answer 3

I'm using haml-coffee together with rails asset pipeline.
Quite exotic choice, but works great so far.

Inside view it's simple as that:

var MyView = Backbone.View.extend({
  template: JST['path/to/mytemplate']

  render: function(){
    var html = this.template(this.model.toJSON());
    this.$el.html(html);
  }
})

Tantara