2

特にリストでは、反応性について私が理解できないことがあります。私の問題は、リーダーボードの例で最も簡単にモデル化できます ( meteor --create example leaderboard)

まず、これをクライアント側の js に追加します ( http://listtest.meteor.com/で行われているように):

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

...そして、アプリを実行しながらコンソールを監視します。選択した科学者を切り替えると、必要がない場合でも、各プレイヤーが再レンダリングされることに気付くでしょう。

IRC の助けのおかげで、以下のようにメイン テンプレートの下部をサブテンプレート化または #isolating すること (およびhttp://listtest2.meteor.com/で非効率性を解決すること) を発見しました。が選択されている場合、2 つのプレーヤーのみが再レンダリングされます: 新しく選択されたプレーヤーと選択解除されたプレーヤーです。

<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 に答える