2013-07-31 3 views
2

Есть что-то о реактивности, которую я просто не понимаю, особенно со списками. Моя проблема может быть наиболее легко моделируются в списке лидеров, например (meteor --create example leaderboard)Реактивность, изоляция и списки

Во-первых, добавьте в стороне клиента JS (как это делается в http://listtest.meteor.com/):

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

... а затем смотреть консоли при запуске приложения. Когда вы переключаете выбранного ученого, вы заметите, что каждый игрок повторно отображает, даже если ему это не нужно.

Благодаря некоторой помощи в IRC я ​​обнаружил, что подтемпликация или #изображение нижней части основного шаблона, как показано ниже (и в 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> 

Мой вопрос заключается в следующем:. почему изолируя другую часть шаблона вызывает поведение различных subtemplate, чтобы изменить

Спасибо? так много.

+1

Возможно, что, остановив родительский шаблон «leaderboard» от рендеринга, выделив изменения в разделе «подробности», вы остановите его на рендеринг всех своих подтемов. Вот что сказано [здесь] (http://stackoverflow.com/a/13208254/728291), но источник информации отсутствует. Очень хороший вопрос. – user728291

+0

может быть связано: https://github.com/meteor/meteor/issues/1210 – imslavko

ответ

2

Объяснения можно найти в meteor documenation:

Реакционной изоляция

Каждый шаблон работает как свои собственные реактивные вычисления. Когда шаблон обращается к источнику реактивной информации, например, вызвав Session.get или , делая запрос к базе данных, это устанавливает зависимость данных, которая будет , заставляя весь шаблон повторно отображаться при изменении данных. Этот означает, что сумма повторного рендеринга для конкретного изменения равна , на которую повлияло то, как вы разделили свой HTML на шаблоны.

Как правило, точная степень повторного рендеринга не имеет решающего значения, но если вы хотите больше контроля, например, по соображениям производительности, вы можете использовать {{#isolate}} ... {{/ изолят} } помощник. Установленные зависимости данных внутри #isolate блока локализованы в блоке и не будут в сами заставляют родительский шаблон повторно отображать. Этот блок хелпер, по существу, передает преимущества реактивности, которые вы получите по , вытягивая содержимое в новый подшаблон.

+0

Спасибо! Итак, если родительский шаблон повторно отображает, его подшаблоны всегда будут повторно отображены? – JosephSlote

+1

Если вы используете другой блок под названием ** [#constant] (http://docs.meteor.com/#constant) **, тогда код внутри этого блока не будет перезагружен, даже если родительский шаблон перезагружен. В другом случае вы правы. –

Смежные вопросы