2

我只是不了解反应性，特别是列表。我的问题可以很容易地用排行榜示例 ( meteor --create example leaderboard)

首先，将其添加到客户端 js（如在http://listtest.meteor.com/中所做的那样）：

Template.player.rendered = function () {
    console.log('Player rendered');
}

...然后在运行应用程序时观看控制台。当您切换选定的科学家时，您会注意到每个玩家都重新渲染，即使它不需要。

感谢 IRC 的一些帮助，我发现子模板或#isolating 主模板的底部如下所示（在http://listtest2.meteor.com/解决了效率低下的问题。换句话说，当不同的玩家被选中时，现在只有两个玩家被重新渲染：新选择的和取消选择的。

<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>

我的问题是：为什么隔离模板的不同部分会导致不同子模板的行为发生变化？

非常感谢。

4

1 回答 1

2

解释可以在流星文档中找到：

反应性隔离

每个模板都作为其自己的反应式计算运行。当模板访问响应式数据源时，例如通过调用 Session.get 或进行数据库查询，这会建立数据依赖关系，这将导致整个模板在数据更改时重新呈现。这意味着特定更改的重新呈现量受您将 HTML 划分为模板的方式的影响。

通常，重新渲染的确切程度并不重要，但如果您想要更多控制，例如出于性能原因，您可以使用 {{#isolate}}...{{/isolate}} 助手。在#isolate 块中建立的数据依赖关系被本地化到块中，并且它们本身不会导致父模板被重新渲染。这个块助手本质上传达了通过将内容拉出到新的子模板中可以获得的反应性好处。

于 2013-08-01T06:04:43.707 回答