反应性、隔离和列表
[英] Reactivity, isolation, and lists
本文介绍了反应性、隔离和列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
关于反应性，我有些不明白，特别是对于列表.我的问题可以用排行榜示例最容易地建模(meteor --create example leaderboard)
首先，将此添加到客户端 js(如在 http://listtest.meteor.com/):
Template.player.rendered = function () {console.log('播放器渲染');}
...然后在运行应用程序时观察控制台.当您切换选定的科学家时，您会注意到每个玩家都会重新渲染，即使不需要.
感谢 IRC 上的一些帮助，我发现子模板或#isolating 主模板的底部部分，如下所示(以及 http://listtest2.meteor.com/ solves the inefficiency. In other words, when a different player is selected, only two players are now re-rendered: the newly selected and the deselected.
<title>排行榜</title><身体><div id="外层">{{>排行榜}}
<模板名称=排行榜"><div class="排行榜">{{#每个玩家}}{{>玩家}}{{/每个}}
{{#隔离}}{{#if selected_name}}<div class="详细信息"><div class="name">{{selected_name}}</div><input type="button" class="inc" value="给5分"/>
{{/如果}}{{#unless selected_name}}<div class="none">点击一个玩家选择</div>{{/除非}}{{/隔离}}<模板名称=玩家"><div class="player {{selected}}"><span class="name">{{name}}</span><span class="score">{{score}}</span>
我的问题是:为什么隔离模板的不同部分会导致不同子模板的行为改变?
非常感谢.
解决方案
可以在 meteor 文档 中找到说明一个>:
<块引用>
反应隔离
每个模板都作为自己的反应式计算运行.当模板访问响应式数据源，例如通过调用 Session.get 或进行数据库查询，这会建立一个数据依赖关系，它将导致在数据更改时重新渲染整个模板.这意味着特定更改的重新渲染量是受您将 HTML 划分为模板的方式的影响.
通常，重新渲染的确切范围并不重要，但如果您想要更多控制，例如出于性能原因，您可以使用{{#isolate}}...{{/isolate}} 助手.建立数据依赖关系在#isolate 块内被本地化到块并且不会在自己导致父模板被重新渲染. 这个块helper 本质上传达了您将获得的反应性好处将内容提取到新的子模板中.
There is something about reactivity I just don't understand, specifically with lists. My problem can be most easily modeled with the leaderboard example (meteor --create example leaderboard)
First, add this to the client side js (as is done at http://listtest.meteor.com/):
Template.player.rendered = function () {
console.log('Player rendered');
}
...and then watch the console as you run the app. When you switch the selected scientist, you'll notice that each player re-renders, even when it doesn't need to.
Thanks to some help on IRC, I discovered that sub-templating or #isolating the bottom portion of the main template like below (and at http://listtest2.meteor.com/ solves the inefficiency. In other words, when a different player is selected, only two players are now re-rendered: the newly selected and the deselected.
<head>
<title>Leaderboard</title>
</head>
<body>
<div id="outer">
{{> leaderboard}}
</div>
</body>
<template name="leaderboard">
<div class="leaderboard">
{{#each players}}
{{> player}}
{{/each}}
</div>
{{#isolate}}
{{#if selected_name}}
<div class="details">
<div class="name">{{selected_name}}</div>
<input type="button" class="inc" value="Give 5 points" />
</div>
{{/if}}
{{#unless selected_name}}
<div class="none">Click a player to select</div>
{{/unless}}
{{/isolate}}
</template>
<template name="player">
<div class="player {{selected}}">
<span class="name">{{name}}</span>
<span class="score">{{score}}</span>
</div>
</template>
My question is this: why does isolating a different portion of a template cause a different subtemplate's behavior to change?
Thanks so much.
解决方案
Explanation can be found in meteor documenation:
Reactivity isolation
Each template runs as its own reactive computation. When the template
accesses a reactive data source, such as by calling Session.get or
making a database query, this establishes a data dependency that will
cause the whole template to be re-rendered when the data changes. This
means that the amount of re-rendering for a particular change is
affected by how you've divided your HTML into templates.
Typically, the exact extent of re-rendering is not crucial, but if you
want more control, such as for performance reasons, you can use the
{{#isolate}}...{{/isolate}} helper. Data dependencies established
inside an #isolate block are localized to the block and will not in
themselves cause the parent template to be re-rendered. This block
helper essentially conveys the reactivity benefits you would get by
pulling the content out into a new sub-template.
这篇关于反应性、隔离和列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
