Reactividad, aislamiento y listas.
Hay algo acerca de la reactividad que no entiendo, específicamente con listas. Mi problema se puede modelar más fácilmente con el ejemplo de la tabla de clasificación (meteor --create example leaderboard
)
Primero, agregue esto al lado del cliente js (como se hace enhttp://listtest.meteor.com/):
Template.player.rendered = function () {
console.log('Player rendered');
}
... y luego ver la consola mientras ejecuta la aplicación. Cuando cambies al científico seleccionado, notarás quecada el jugador vuelve a reproducir, incluso cuando no es necesario.
Gracias a la ayuda del IRC, descubrí que la sub-plantilla o # aislamiento de la parte inferior de la plantilla principal como abajo (y enhttp://listtest2.meteor.com/ Resuelve la ineficiencia. En otras palabras, cuando se selecciona un jugador diferente, ahora solo se vuelven a representar dos jugadores: el nuevo seleccionado y el no seleccionado.
<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>
Mi pregunta es la siguiente: ¿por qué aislar una parte diferente de una plantilla provoca undiferente ¿El comportamiento del subtemplate para cambiar?
Muchas gracias.