Search code examples
javascriptjqueryjquery-pluginsbackbone.jstemplating-engine

JS templating system with Backbone.js


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)


Solution

  • 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.