Underscore template Uncaught ReferenceError variable is not defined

Question

I am trying to render a basic backbone view with an underscore template, but I keep getting the following error when attempting to render the template.

Uncaught ReferenceError: amount is not defined

here's the jsfiddle: http://jsfiddle.net/rkj6j36n/

HTML

<body>
    <div class="msg-con"></div>
</body>

JS

DumbViewObj = Backbone.View.extend({
    el: $('.msg-con'),
    initialize:function(){
        this.render();
    },
    render: function(){
        var template = _.template('I am <%= amount %> dumb',{amount:'200'});
        this.$el.append(template);
    },
});
var dumb = new DumbViewObj();

I'm sure the solution is something dead simple, but I can't figure it out

every thing seem's to be fine , used the exact same code http://jsfiddle.net/JQu5Q/7/ — StateLess, Sep 26 '14 at 18:40
@aktiv-coder: You're using an old version of Underscore, the `_.tempate(template_string, template_data)` form is no longer supported. — mu is too short, Sep 26 '14 at 21:55
Bergi's answer is spot-on - http://stackoverflow.com/q/16977178/104380 — vsync, Mar 17 '16 at 14:38

score 18 · Accepted Answer · answered Sep 26 '14 at 18:34

Because template is a function and template( obj ) returns the string you are after, it does not return the string after you call it.

What your code is doing

var xxx = template();
this.$el.append(xxx);

what you should be doing

render: function(){
    var template = _.template($('#dumb').html());
    var vars = {amount:200};
    var html = template(vars);
    this.$el.append(html);
},

score 5 · Answer 2 · answered Sep 26 '14 at 18:56

5

in one line:

this.$el.append(_.template('I am <%= amount %> dumb')({amount:200}))

answered Sep 26 '14 at 18:56

aleha_84

8,309
2
38
46

this seems to be an outdated solution for an older underscore version – Alexander Mills Jan 18 '15 at 03:20

score 4 · Answer 3 · answered Sep 26 '14 at 18:36

4

_.template compiles the template into a function. You have to pass the parameters to the resulting function to be evaluated:

    var template = _.template('I am <%= amount %> dumb');
    this.$el.append(template({amount:'200'}));

answered Sep 26 '14 at 18:36

dreyescat

13,558
5
50
38

@aktiv-coder Sorry I have not enough reputation points for comments. Your snippet is working because you are using an older version of underscore. Try to use 1.7 instead. – dreyescat Sep 26 '14 at 18:44

Underscore template Uncaught ReferenceError variable is not defined

3 Answers3