Sự cố Hiển thị bộ sưu tập xương sống bằng mẫu Mustache

Question

Tôi khá mới với xương sống js và Mustache. Tôi đang cố gắng để tải các bộ xương sống (Object mảng) trên trang tải từ rails json đối tượng để lưu các cuộc gọi thêm. Tôi gặp khó khăn khi dựng bộ sưu tập xương sống bằng mẫu ria mép.

tôi bộ sưu tập mô hình & là

var Item = Backbone.Model.extend({ 

}); 

App.Collections.Items= Backbone.Collection.extend({ 
    model: Item, 
    url: '/items' 
}); 

và xem

App.Views.Index = Backbone.View.extend({ 
    el : '#itemList', 
    initialize: function() { 
     this.render(); 
    }, 

    render: function() { 
     $(this.el).html(Mustache.to_html(JST.item_template(),this.collection)); 
     //var test = {name:"test",price:100}; 
     //$(this.el).html(Mustache.to_html(JST.item_template(),test)); 
    } 
}); 

Trong giao diện trên render, tôi có thể có khả năng làm cho mô hình duy nhất (nhận xét kiểm tra obeject), nhưng không phải là bộ sưu tập. Tôi hoàn toàn bị tấn công ở đây, tôi đã thử với cả hai gạch dưới templating & ria mép nhưng không may mắn.

Và đây là mẫu

<li> 
<div> 
    <div style="float: left; width: 70px"> 
    <a href="#"> 
     <img class="thumbnail" src="http://placehold.it/60x60" alt=""> 
    </a> 
    </div> 
    <div style="float: right; width: 292px"> 
    <h4> {{name}} <span class="price">Rs {{price}}</span></h4> 
    </div> 
    </div> 
</li> 

và mảng đối tượng của tôi loại trông như thế này

Answer 1

Cuối cùng nó chỉ ra rằng bộ ria mép không xử lý mảng các đối tượng gửi đến mẫu, vì vậy tôi phải quấn nó với các đối tượng khác như thế này

render: function() { 
    var item_wrapper = { 
      items : this.collection 
    } 

    $(this.el).html(Mustache.to_html(JST.item_template(),item_wrapper)); 

} 

và trong mẫu chỉ lặp lại mảng mục để hiển thị html

{{#items}} 
<li> 
<div> 
    <div style="float: left; width: 70px"> 
    <a href="#"> 
     <img class="thumbnail" src="http://placehold.it/60x60" alt=""> 
    </a> 
    </div> 
    <div style="float: right; width: 292px"> 
    <h4> {{name}} <span class="price">Rs {{price}}</span></h4> 
    </div> 
    </div> 
</li> 
{{/items}} 

Hy vọng nó sẽ giúp cho người khác.

Answer 2

Điều này xảy ra vì bộ ria mép mong đợi cặp khóa/giá trị -giảm giá trị mảng cho danh sách không trống. Từ mustache man page, phần "Danh sách không rỗng":

Template: 

{{#repo}} 
    <b>{{name}}</b> 
{{/repo}} 

Hash: 

{ 
    "repo": [ 
    { "name": "resque" }, 
    { "name": "hub" }, 
    { "name": "rip" }, 
    ] 
} 

Output: 

<b>resque</b> 
<b>hub</b> 
<b>rip</b> 

Nếu bạn vượt qua chỉ là một mảng, ria mép không có một cách để biết được nơi để mở rộng nó bên trong mẫu.

Answer 3

Moustache có thể xử lý mảng sử dụng {{#.}}{{.}}{{/.}}

Answer 4

Sử dụng Hogan.js thực hiện.

Với mẫu:

<ul> 
{{#produce}} 
    <li>{{.}}</li> 
{{/produce}} 
</ul> 

Và bối cảnh:

var context = { produce: [ 'Apple', 'Banana', 'Orange' ]); 

Chúng tôi nhận được:

<ul> 
    <li>Apple</li> 
    <li>Banana</li> 
    <li>Orange</li> 
</ul>