Backbone template method. Why are we passing in a model?

Question

I can't figure out why we are passing in a model.toJSON() into this template:

app.TodoView = Backbone.View.extend({
  tagName: 'li',
  template: _.template($('#item-template').html()),
  render: function(){
    this.$el.html(this.template(this.model.toJSON()));
    return this; // enable chained calls
  }
});

The example comes from this tutorial.

this.template(this.model.toJSON()) is the confusing part to me. The template method doesn't seem to take in an argument right? What is going on?

Answer 1

Underscore _.template function takes a template string as argument (and optionally a settings object) and returns a new pre-compiled template function which takes an object as an argument.

This object is the data used within the template:

// creates a template function
var templateFunc = _.template("<span><%= name %></span>");

// render the template using the passed data
templateFunc({ name: "Émile" }); // <span>Émile</span>

By default, template places the values from your data in the local scope via the with statement. However, you can specify a single variable name with the variable setting.

_.template("Using 'with': <%= data.answer %>", {variable: 'data'})({answer: 'no'});

model.toJSON() returns a shallow copy or the attributes hash of the model.

To achieve the equivalent of the above example:

var model = new Backbone.Model({ name: "Émile" });
templateFunc(model.toJSON()); // <span>Émile</span>

---

For Underscore.js before v1.7, the template function signature was a little different:

_.template(templateString, [data], [settings]) 

If a data object was passed, it didn't returned a function, but returned the rendered template string directly.

_.template('This is <%= val %>.', { val: "deprecated" });
// This is deprecated.