Reaktywność, izolacja i listy
Coś w reaktywności po prostu nie rozumiem, szczególnie z listami. Mój problem można najłatwiej modelować za pomocą przykładu tabeli liderów (meteor --create example leaderboard)
Po pierwsze, dodaj to do js po stronie klienta (tak jak whttp://listtest.meteor.com/):
Template.player.rendered = function () {
console.log('Player rendered');
}
... a następnie obserwuj konsolę podczas uruchamiania aplikacji. Kiedy zmienisz wybranego naukowca, zauważysz tokażdy odtwarza odtwarzacza, nawet jeśli nie ma takiej potrzeby.
Dzięki pomocy na IRC odkryłem, że podprogramowanie lub #isolowanie dolnej części głównego szablonu, jak poniżej (i nahttp://listtest2.meteor.com/ rozwiązuje problem nieefektywności. Innymi słowy, gdy wybrany jest inny gracz, tylko dwóch graczy jest teraz ponownie renderowanych: nowo wybrany i odznaczony.
<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>
Moje pytanie brzmi: dlaczego izolowanie innej części szablonu powodujeróżne zmienić zachowanie subtemplate?
Dzięki wielkie.