Backbone.js視圖屬性中的變量

Question

我試圖實現通過使用模型的屬性作爲視圖中的變量來呈現HTML塊。

App = Backbone.Model.extend({ 
     contentType: "text" 
     }); 

AppView = Backbone.View.extend({ 
     ContentTpl: _.template($('#slide-'+this.model.get('contentType')).html()), 

     render: function(){ 
      $('#wrapper').html(this.ContentTpl());  
     } 
     }); 

var app = new App(); 
var appView = new AppView({model: app}); 
appView.render(); 

HTML：

<div id="wrapper"> 
</div> 

<script type="text/template" id="slide-text"> 
    <p>This is a test</p> 
</scrip> 

但是，這會導致錯誤......

Answer 1

你定義你的看法是錯誤的。

你有

AppView = Backbone.Model.extend({ 

應該

AppView = Backbone.View.extend({ 

，並不能求this.model視圖初始化之前，請不要使用以下：

ContentTpl: function() { 
    return _.template($('#slide-'+ this.model.contentType).html()); 
}, 

和， contentType不是模型屬性，它是模型對象上的屬性，不能使用get（）。

將其定義爲一個模型屬性，你必須要麼把它定義爲模型的默認值，或者通過它，當你實例化一個對象：

var app = new App({contentType: 'text'}); 

或

App = Backbone.Model.extend({ 
    defaults: { 
    "contentType": "text" 
    } 
}); 

Answer 2

你必須在initialize函數中加載您的模板。 this.model在那時不存在。

initialize: function() { 
    this.ContentTpl = _.template($('#slide-'+this.model.get('contentType')).html()); 
} 

但是，這仍然是一個糟糕的模式形式的骨幹。我會注入它作爲一個選項。

var template = $('#slide-'+this.model.get('contentType')).html(); 
var appView = new AppView({model: app, ContentTpl: template }); 
... 

// in your view 
initialize: function(options) { 
    this.ContentTpl = _.template(options.ContentTpl); 
}