訪問模型從骨幹視圖下劃線模板屬性

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