访问模型从骨干视图下划线模板属性

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.'); 
     } 
    }}); 
}); 

我发现我的Underscor e模板不会提取我发送的数据。它说：

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

我试着改变_.template调用提供与resource_uri属性设置一个文本对象，我也得到了同样的错误。

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

Answer 1

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()))