Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
46 lines (34 sloc) 1.13 KB

Partials

The problem: there may be parts of HTML templates that can be reused in many parts of the application. Defining them more than once is not DRY, which may make your application less maintainable.

Solution: separating these snippets into partials.

Partials are templates that are meant to be used inside other templates.

One typical use of partials is for lists where the template for list items may be defined as a separate template from the list itself.

Solution

You can pass the template function for the partial as a parameter to the first template.

In this example, the function itemTemplate is passed onto the parameters for template().

TasksList = Backbone.View.extend({
  template: _.template([
    "<ul class='task_list'>",
      "<% items.each(function(item) { %>",
        "<%= itemTemplate(item) %>",
      "<% }); %>",
    "</ul>"
  ].join('')),

  itemTemplate: _.template(
    "<li><%= name %></li>"
  ),

  render: function() {
    var html = this.template({
      items: tasks /* a collection */,
      itemTemplate: this.itemTemplate
    });

    $(this.el).append(html);
  }
});