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)

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 : http://handlebarsjs.com/ — kinakuta, Mar 19 '12 at 07:09
If you like Coffeescript, and are also looking for a build system to pull it all together: brunch is nice. http://brunch.io Uses (by default, can be changed) eco for templating. — Thilo, Mar 19 '12 at 07:12
Could you please provide some good basic examples of using the templating system with Backbone.js, so that I can get a good idea.. — copenndthagen, Mar 19 '12 at 07:55

score 7 · Answer 1 · answered Mar 19 '12 at 14:56

7

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!

answered Mar 19 '12 at 14:56

jcreamer898

8,109
5
41
56

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.... – copenndthagen Mar 19 '12 at 17:04
Also what the this inside View refer to ? – copenndthagen Mar 19 '12 at 17:12
1

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. – Brian Reischl Mar 20 '12 at 00:05

score 6 · Accepted Answer · answered Mar 19 '12 at 13:28

6

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.

answered Mar 19 '12 at 13:28

fguillen

36,125
23
149
210

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};` – tkone Mar 21 '12 at 03:10
That's pretty succinct – Code Whisperer Aug 07 '13 at 13:00

score 0 · Answer 3 · answered Mar 20 '12 at 17:36

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);
  }
})

JS templating system with Backbone.js

3 Answers3

Linked