Question

我有一个Backbone.js视图，如下所示：

var StreamV = Backbone.View.extend({
    tagName: 'div',
    className: 'stream',
    events: { },
    initialize: function () {
        this.listenTo(this.model, 'change', this.render);
    },
    render: function () {
        this.$el.html(this.template(this.model.attributes));
        return this;
    },
    template: function (data) {
        console.log(data);
        if (data.mime_type.match(/^audio\//)) {
            return _.template('<audio controls><source src="<%= resource_uri %>">No sound</audio>', data);
        } else {
            // FIXME Do what?
            return _.template();
        }
    },
});

使用如下所示的相应模型：

var StreamM = Backbone.Model.extend({
    url: function () {
        return (this.id) ? '/streams/' + this.id : '/streams';
    }
});

我正试图像这样实例化StreamV视图：

$(document).ready(function () {
    var streams = new StreamsC;
    streams.fetch({success: function (coll, resp, opts) {
        var mp3 = coll.findWhere({mime_type: 'audio/mp3'});
        if (mp3) {
            var mp3view = new StreamV({el: $('#streams'),
                                       model: mp3});
            mp3view.render();
        } else {
            $('#streams').html('No audio/mp3 stream available.');
        }
    }});
});

我发现我的Underscore模板没有拿起我发送的数据。它说：

ReferenceError: resource_uri is not defined
  ((__t=( resource_uri ))==null?'':__t)+

我尝试更改_.template调用以提供具有resource_uri属性集的文字对象，并且我得到相同的错误。

我通过提供一个对象作为_.template的第二个参数来做正确的事吗？

Answer 1

Underscore模板函数返回一个函数，以便稍后用数据调用。它的第二个参数不是要插入的数据，而是设置对象。

来自Underscore文档：

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

在你的情况下，你首先要编译模板：

this.compiledTemplate = _.template('<audio controls><source src="<%= resource_uri %>">No sound</audio>');

然后，当您准备渲染视图时，稍后使用数据调用此函数：

this.$el.html(this.compiledTemplate(this.model.toJSON()))

从Backbone视图Underscore模板访问模型属性

1 个答案: