Meteor ：等待所有模板渲染完毕

我有以下模板代码

<template name="home">
    <div class="mainBox">
        <ul class="itemList">
            {{#each this}}
                {{> listItem}}
            {{/each}}
        </ul>
    </div>
</template>

<template name="listItem">
    <li class="item">
        {{username}}
    </li>
</template>

我想在渲染所有“listItem”后执行代码。大约有100个。我尝试了以下方法

Template.home.rendered = function() {
   // is this called once all of its 'subviews' are rendered?
};

但它不会等到所有视图都加载完毕。

了解何时加载所有子视图模板的最佳方法是什么？

我就是这样进行的：

client/views/home/home.html

<template name="home">
  {{#if itemsReady}}
    {{> itemsList}}
  {{/if}}
</template>

<template name="itemsList">
  <ul>
    {{#each items}}
      {{> item}}
    {{/each}}
  </ul>
</template>

<template name="item">
  <li>{{value}}</li>
</template>

client/views/home/home.js

Template.home.helpers({
  itemsReady:function(){
    return Meteor.subscribe("items").ready();
  }
});

Template.itemsList.helpers({
  items:function(){
    return Items.find();
  }
});

Template.itemsList.rendered=function(){
  // will output 100, once
  console.log(this.$("li").length);
};

lib/collections/items.js

Items=new Mongo.Collection("items");

server/collections/items.js

insertItems=function(){
  var range=_.range(100);
  _.each(range,function(index){
    Items.insert({value:"Item "+index});
  });
};

Meteor.publish("items",function(){
  return Items.find();
});

server/startup.js

Meteor.startup(function(){
  Items.remove({});
  if(Items.find().count()===0){
    insertItems();
  }
});

我们指定仅当出版物准备就绪时才呈现项目列表，因此到那时数据就可用并且正确的数量li元素将显示在列表渲染回调中。

现在同样使用iron:router waitOn特征 ：

client/views/home/controller.js

HomeController=RouteController.extend({
  template:"home",
  waitOn:function(){
    return Meteor.subscribe("items");
  }
});

client/lib/router.js

Router.configure({
  loadingTemplate:"loading"
});

Router.onBeforeAction("loading");

Router.map(function(){
  this.route("home",{
    path:"/",
    controller:"HomeController"
  });
});

client/views/loading/loading.html

<template name="loading">
  <p>LOADING...</p>
</template>

Using iron:router可能更好，因为它优雅地解决了一个常见模式：我们不再需要 itemsReady 助手，只有当WaitListwaitOn 返回的值将是全局就绪的。

不要忘记添加加载模板并设置默认的“加载”挂钩，否则它将无法工作。