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

Question

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

Answer 1

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/