未定义下划线模板未捕获的ReferenceError变量

时间:2014-09-26 18:27:28

标签: javascript backbone.js underscore.js underscore.js-templating

我正在尝试使用下划线模板呈现基本主干视图,但在尝试呈现模板时,我不断收到以下错误。

未捕获的ReferenceError:金额未定义

这是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();

我确信解决方案很简单,但我无法弄清楚

3 个答案:

答案 0 :(得分:16)

因为template是一个函数而模板(obj)返回你所追求的字符串,所以在你调用它之后它不会返回字符串。

您的代码正在做什么

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

你应该做什么

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

答案 1 :(得分:5)

在一行中:

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

答案 2 :(得分:3)

_.template将模板编译成函数。您必须将参数传递给要评估的结果函数:

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