Backbone.js與Handlebars.js不呈現選項

我正在構建我的第一個Backbone.js應用程序，並希望使用Handlebars插入我的數據。我已經得到了backbone.View渲染確定，但{{變量}}沒有被與我通過在數據代替。Backbone.js與Handlebars.js不呈現選項

這是我的看法

OrderRow = Backbone.View.extend({ 

template: Handlebars.compile(
    '<div class="orderContainer">' + 
     '<p class="row-top-container left">{{id}}</p>' + 
     '<p class="row-top-container right">{{time_stamp}}</p>' + 
     '<p class="row-top-container right">{{queue_time}}</p><br />' + 
     '<p class="items-contaier">{{items}}</p>' + 
    '</div>' 
), 

initialize: function(){ 
    console.log("options used: " + this.options.sayHello); 
    this.render(); 
}, 

render: function(){ 
    this.$el.html(this.template(this.options)); 
    return this; 
} 
}); 


    var data = { 
     id:657543, 
     name:"name" 
    } 

    var row = new OrderRow({ el: $('.row'), options:data });

這是DOM後視圖的被渲染

DOM structure after View rendered

有誰知道我錯過了什麼？任何幫助表示讚賞。

謝謝！

來源

2014-02-10 thehindutimes

你有幾個問題：

骨幹不再在視圖中自動設置this.options所以當你升級骨幹你的代碼將打破。你可以做自己在initialize解決這個問題：
```
initialize: function(options) { 
    this.options = options; 
    //... 
} 
```
您有多個.row元素，因此說el: $('.row')將綁定視圖到所有這些（取決於骨幹版本），並可能導致奇怪的事情發生。你會更好使用的<li> S上的id屬性一個視圖綁定到每個<li>：
```
new OrderRow({ el: '#152293', ... }); 
```
你不餵你的模板是什麼你以爲你是。你將數據傳遞到您的視圖中options選項：
```
new OrderRow({ ..., options: data }); 
```
使data將在this.options.options視圖內結束，這意味着，你想說：
```
this.$el.html(this.template(this.options.options)) 
```
或使用this.options = options.options在initialize並在其他地方繼續使用this.options。

演示：http://jsfiddle.net/ambiguous/9w3AW/

結束語您data中的骨幹機型可能會更有意義，但。

來源

2014-02-10 22:15:18

感謝您的支持！我還讓我的周圍Backbone.js的只有一兩件事，我傳遞將現包含數據的模型如你所說的頭，但我只獲得從模型中「身份證」。我沒有收到'time_stamp'，'queue_time'或'items'。這是爲什麼？再次，謝謝！ – thehindutimes

模型將具有Handlebars將會看到的id屬性，其他屬性將位於其「屬性」屬性中。你通常會說'model.toJSON（）'來獲取模板的數據。 –

太棒了，就是這麼做的。謝謝！ – thehindutimes

Backbone.js與Handlebars.js不呈現選項

回答

相關問題