Using functions in a underscore template

Question

I am trying to use a function in an Underscore template as shown here but I am getting an error: Uncaught ReferenceError: getProperty is not defined Below is the code I am using ``` var CustomerDetailView = Backbone.View.extend({ tagName : "div", template: "#customer-detail-view-template", initialize: function() { _.bindAll(this, 'render'); this.model.bind('change', this.render); this.initializeTemplate(); }, initializeTemplate: function() { this.template = _.template($(this.template).html()); }, render: function() { var data = this.model.toJSON(); _.extend(data, viewHelper); console.log(data); var html = _.template($(this.template), data); $(this.el).html(html); return this; } }) ``` And the template: ```

Accepted Answer

Your problem is that once you're inside `render`, `this.template`:

```
var html = _.template($(this.template), data);
```

is already a compiled template function:

```
initializeTemplate: function() {
    this.template = _.template($(this.template).html());
}
```

The `_.template` call:

Compiles JavaScript templates into functions that can be evaluated for rendering.

So you're saying this:

```
_.template($(some_compiled_template_function).html(), data);
//           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
```

That is executing the `$(function() { ... })` form of `$()` and that:

Binds a function to be executed when the DOM has finished loading.

That little bit of confusion makes everything go haywire and chaos abounds. Fix how you use the template and things will start making more sense:

```
render: function() {
    //...
    var html = this.template(data);
    //...
}
```

Your `this.template` will be a function inside `render` so call it as a function.

Demo (with some simplifications for clarity): http://jsfiddle.net/ambiguous/SgEzH/

Using functions in a underscore template

Solution

Problem