Question

我需要将项目显示为夫妻。像这样举例如：

Template.container.couples = function() {
    var items = Items.find({}, {sort: {sort_field: 1}}).fetch();
    var couples = [];
    for (var i = 0; i < items.length; i++) {
        couples.push({
            itemA: items[i],
            itemB: items[i + 1]
        });
        i++;
    }
    return couples;
};

<template name="container">
   <ul>
       {{#each couples}}
           <li>
               <p class="item-a">{{>item itemA}}</p>
               <span>|</span>
               <p class="item-b">{{>item itemB}}</p>
           </li>
       {{/each}}
   <ul>
</template>

<template name="item">
    <strong>{{title}}</strong>
</template>

项目看起来像：

{
   sort_field: 1,
   title: 'Item 1',
   type: 'A'
},
{
   sort_field: 2,
   title: 'Item 2',
   type: 'B'
},
{
   sort_field: 3,
   title: 'Item 3',
   type: 'A'
},
{
   sort_field: 4,
   title: 'Item 4',
   type: 'B'
},
{
   sort_field: 5,
   title: 'Item 5',
   type: 'A'
}

此代码效果很好，但是当我更新其中一个项目的标题时，所有项目都会重新呈现。

如何解决？如何创建具有反应性的这种布局？

Answer 1

截至Meteor 0.8.0，Meteor will automagically only re-render content that changes.

Meteor中的自定义列表渲染

1 个答案: