Meteor : 等到所有模板都呈现出来 [英] Meteor : wait until all templates are rendered
问题描述
我有以下模板代码
<div class="mainBox"><ul class="itemList">{{#每个这个}}{{>项目清单}}{{/每个}}<模板名称="listItem"><li class="item">{{用户名}}
并且我想在呈现所有listItem"后执行代码.其中大约有 100 个.我尝试了以下
Template.home.rendered = function() {//是否在渲染所有子视图"后调用它?};但它不会等到所有视图都加载完毕.
知道何时加载所有子视图模板的最佳方法是什么?
这就是我的处理方式:
client/views/home/home.html
{{#if itemsReady}}{{>项目列表}}{{/如果}}<模板名称="itemsList"><ul>{{#每件物品}}{{>物品}}{{/每个}}<模板名称=项目"><li>{{value}}</li>client/views/home/home.js
Template.home.helpers({项目就绪:功能(){返回 Meteor.subscribe("items").ready();}});Template.itemsList.helpers({项目:功能(){返回 Items.find();}});Template.itemsList.rendered=function(){//将输出 100，一次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(范围，功能(索引){Items.insert({value:"Item "+index});});};Meteor.publish("items",function(){返回 Items.find();});server/startup.js
Meteor.startup(function(){项目.remove({});if(Items.find().count()===0){插入项目()；}});我们指定我们只在发布准备好时才呈现我们的项目列表，所以到那时数据可用并且正确数量的 li 元素将显示在列表呈现的回调中.
现在同样使用 iron:router waitOn 功能:
client/views/home/controller.js
HomeController=RouteController.extend({模板:家"，等待:功能(){return Meteor.subscribe("items");}});client/lib/router.js
Router.configure({加载模板:加载"});Router.onBeforeAction("加载中");路由器映射(函数(){this.route("家",{小路:"/"，控制器:家庭控制器"});});client/views/loading/loading.html
<p>正在加载...</p>使用 iron:router 可能更好，因为它优雅地解决了一个常见模式:我们不再需要 itemsReady 助手，只有在 WaitList 将全局就绪.
一定不要忘记添加加载模板并设置默认的加载"钩子，否则它将无法工作.
I have the following template code
<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>
And I'd like to execute a code once ALL of the "listItem" are rendered. There are about 100 of them. I tried the following
Template.home.rendered = function() {
// is this called once all of its 'subviews' are rendered?
};
But it doesn't wait until all views are loaded.
What's the best way of knowing when all sub-view templates are loaded?
This is how I proceed :
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();
}
});
We specify that we want to render our list of items only when the publication is ready, so by that time data is available and the correct number of li elements will get displayed in the list rendered callback.
Now the same using iron:router waitOn feature :
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 is probably better because it solves a common pattern elegantly : we don't need the itemsReady helper anymore, the home template will get rendered only when the WaitList returned by waitOn will be globally ready.
One must not forget to add both a loading template and setup the default "loading" hook otherwise it won't work.
这篇关于Meteor : 等到所有模板都呈现出来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
