流星: Blaze.Each例子

Question

如何使用Blaze.Each？例如，我想效仿如下：

{{#each Items}}
  {{this}}
{{/each}}

在JS。我需要保持反应性。

类似于：

Blaze.Each(Items.find(), function(item) {
 console.log(item);
});

Answer 1

我不知道之前的答案

这个

html

<template name="yourTemplate">
    <div id="each-area">
    </div> 
</template>

js

Template.yourTemplate.onRendered(function () {
    var renderableContent = Blaze.Each(Collection.find({}), function(){
        return Template.templateToRender;
    });
    Blaze.render(renderableContent, this.find("#each-area"));
});

完全等价于以下内容：

html

<template name="yourTemplate">
    <div id="each-area">
        {{#each data}}
           {{>templateToRender}}
        {{/each}}
    </div> 
</template>

js

Template.yourTemplate.helpers({
    "data": function(){
        return Collection.find({})
    }
});

Answer 2

this.autorun(function(){
    var items = Items.find(); 
     _.each(items.fetch(), function(item) {
        console.log(item);
    });
});

这个很管用。每次添加项目时，它都会console.logs。

w/o强调和自动运行：

Blaze.Each(Data.find().fetch(), function(item){ 
    console.log(item) 
})