Question

134

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

rated 0 times [ 140] [ 6] / answers: 1 / hits: 40760 / 12 Years ago, tue, may 1, 2012, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

stacie

Add To Favorites

Follow

Total Points: 476

Total Questions: 92

Total Answers: 102

Location: Bosnia and Herzegovina

Member since Tue, Mar 29, 2022

2 Years ago

stacie questions

1 How to perform validation of a array field using formik and yup validation

Wed, Mar 31, 21, 00:00, 3 Years ago

1 Validation not working on angular reactive forms

Fri, Jun 26, 20, 00:00, 4 Years ago

1 CropperJS Not working well when using it in modal

Thu, Jan 23, 20, 00:00, 4 Years ago

1 Keyboard shortcuts in React, the react-hotkeys library

Fri, Aug 30, 19, 00:00, 5 Years ago

1 Date Pipe in Angular 8

Fri, Aug 2, 19, 00:00, 5 Years ago

View All

answered 12 Years ago damiondenzelc · Accepted Answer

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/