when passing a variable into a backbone template, how to reference it in the template?

backbone.js, javascript, jquery, templates, underscore.js

Solution

Underscore's `_.template`:

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

var compiled = _.template("hello: <%= name %>");
compiled({name : 'moe'});
=> "hello: moe"

So basically, you hand the template function an object and the template looks inside that object for the values you use in your template; if you have this:

<%= property %>

in your template and you call the template function as `t(data)`, then the template function will look for `data.property`.

Usually you convert the view's model to JSON and hand that object to the template:

render: function (eventName) {
    $(this.el).html(this.template(this.model.toJSON()));
    return this;
}

I don't know what your `eventName` is or what you're planning to do with it but you need to get an object with this structure:

data = { id: '...', emailId: '...', status: '...' }

from somewhere and hand that to the template function:

var html = this.template(data)

to get some HTML to put on the page.

Demo (with a fake model for illustrative purposes): http://jsfiddle.net/ambiguous/hpSpf/

Problem

the Template looks like this. ``` <div> <H5>Status for your request</H5> <table> <tbody> <tr> <th>RequestId</th> <th><%=id%></th> </tr> <tr> <th>Email</th> <th><%=emailId%></th> </tr> <tr> <th>Status</th> <th><%=status%></th> </tr> </tbody> </table> </div> ``` This is the View Javascript that renders the page. ``` window.StatusView = Backbone.View.extend({ initialize:function () { console.log('Initializing Status View'); this.template = _.template(tpl.get('status')); }, render:function (eventName) { $(this.el).html(this.template()); return this; }, events: { "click button#status-form-submit" : "getStatus" }, getStatus:function(){ var requestId = $('input[name=requestId]').val(); requestId= $.trim( requestId ); var request = requests.get( requestId ); var statusTemplate = _.template(tpl.get('status-display')); var statusHtml = statusTemplate( request ); $('#results-span').html( statusHtml ); } }); ``` When the clicks on the input, the requestId is read and the status is appended in html element with id 'results-span'. The failure happens when replacing the values in html-template with variable values. ``` var statusTemplate = _.template(tpl.get('status-display')); var statusHtml = statusTemplate( request ); ``` The rendering fails with the following error. ``` Uncaught ReferenceError: emailId is not defined (anonymous function) _.templateunderscore-1.3.1.js:931 window.StatusView.Backbone.View.extend.getStatusstatus.js:34 jQuery.event.dispatchjquery.js:3242 jQuery.event.add.elemData.handle.eventHandle ```

Original source