Có cách nào để lấy chỉ mục trong khi lặp qua bộ sưu tập trong Meteor không?

Question

Ví dụ bên dưới sẽ tạo danh sách tên người chơi, trong đó người chơi là tập hợp dữ liệu từ cơ sở dữ liệu MongoDB.

<template name="players"> 
    {{#each topScorers}} 
    <div>{{name}}</div> 
    {{/each}} 
</template> 

Tuy nhiên, tôi muốn hiển thị bốn người trong một hàng, và sau khi bốn người chơi được in, tôi muốn chia dòng bằng <hr /> và sau đó tiếp tục. Ví dụ:

<template name="players"> 
    {{#each topScorers}} 
    <div style="float:left;">{{name}}</div> 
    {{if index%4==0}} 
     <hr style="clear:both;" /> 
    {{/if} 
    {{/each}} 
</template> 

Tôi có thể làm điều gì đó như thế trong khi chuyển qua bộ sưu tập?

Answer 1

Không có cách nào dễ dàng để làm điều này ngay bây giờ, phiên bản mới nhất của tay lái hỗ trợ trường @index (sẽ làm những gì bạn muốn), nhưng chưa được triển khai trong phiên bản của sao băng - https://github.com/meteor/meteor/issues/489.

Chắc chắn bạn có thể thực hiện riêng {{#each_with_index}} helper của bạn, nó sẽ giống như thế này:

Handlebars.registerHelper('each_with_index', function(items, options) { 
    var out = ''; 
    for(var i=0, l=items.length; i<l; i++) { 
    var key = 'Branch-' + i; 
    out = out + Spark.labelBranch(key,function(){ 
     options.fn({data: items[i], index: i}); 
    }); 
    } 

    return out; 
}); 

Nhược điểm của việc này là bạn bị mất ra giá trị nice của {{#each}} helper sao băng, mà không reactively lại làm cho toàn bộ danh sách khi một mục duy nhất thay đổi.

EDIT: nhờ @zorlak cho con trỏ đến https://github.com/meteor/meteor/issues/281#issuecomment-13162687

Answer 2

Một giải pháp khác, phù hợp với việc duy trì các phản ứng của bộ sưu tập, là sử dụng một mẫu helper với map cursor function.

Dưới đây là một ví dụ cho thấy làm thế nào để trả lại chỉ số khi sử dụng đều có một bộ sưu tập:

index.html: 

<template name="print_collection_indices"> 
    {{#each items}} 
    index: {{ this.index }} 
    {{/each}} 
</template> 

index.js: 

Items = new Meteor.Collection('items'); 

Template.print_collection_indices.items = function() { 
    var items = Items.find().map(function(doc, index, cursor) { 
    var i = _.extend(doc, {index: index}); 
    return i; 
    }); 
    return items; 
};