Question

有一些关于反应性的东西我只是不明白，特别是列表。使用排行榜示例（meteor --create example leaderboard）

可以最轻松地模拟我的问题

首先，将此添加到客户端js（如http://listtest.meteor.com/处所示）：

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

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

感谢IRC的一些帮助，我发现像下面那样（和http://listtest2.meteor.com/的主模板的底部部分进行子模板化或#isolating可以解决效率低下问题。换句话说，当选择不同的播放器时，现在只有两个玩家被重新渲染：新选择和取消选择。

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

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

非常感谢。

Answer 1

可以在meteor documenation：

中找到解释

反应性隔离

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

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

反应性，隔离和列表

1 个答案: