Meteor 如何使用车把做反应模板？刷新所有模板？答案

【问题标题】：How does Meteor do reactive template with handlebars ? Refresh all the Template?Meteor 如何使用车把做反应模板？刷新所有模板？
【发布时间】：2013-10-27 15:27:52
【问题描述】：

我做了一些实验，发现 Meteor 会刷新 <template> </template> 块中的所有内容，只要其中一个值发生变化，例如：{{test}}，其中...

<body>
    ...
  <div id="main-pane">
    {{> todos}}
  </div>
    ...
</body>


<template name="todos">

  {{test}}

  {{#if any_list_selected}}
    <div id="items-view">
        ...
        <ul id="item-list">
          {{#each todos}}
  ->{{testa}}
            {{> todo_item}}
          {{/each}}
        </ul>
        ...
    </div>
  {{/if}}
</template>

在 .js 文件中设置一个 setTimeout 来查找 {{test}} 和 {{testa}} 的预期变化：

Session.setDefault('test', 'aaa');

Template.todos.test = function () {
  return new Date().getTime() + Session.get('test');
};
setTimeout(function () { Session.set('test', 'bbb'); }, 2000);

Template.todos.testa = function () {
  return new Date().getTime(); //the timestamps will be refresh at the same time that test will do...
};

无论{{testa}} 放在模板中的什么位置，它显示的时间戳都会在我们每次执行Session.get('test') 时更新。

我不知道这是否是一个有效的实验......所以我想知道这是否有效：所有模板都重新渲染？因为我认为反应式模板是别的东西......更漂亮......（？）

【问题讨论】：

标签： meteor

【解决方案1】：

如果您想在同一模板中保留值，则必须使用单独的模板或隔离。

例子：

<template name="todos">
{{#each todos}}
  {{>todo_item}}
{{/each}}
</template>

<template name="todo_item">
  {{name}}{{task}}
</template>

或者用隔离：

<template name="todos">
{{#each todos}}
  {{#isolate}}
    {{name}}{{task}}
  {{/isolate}}
{{/each}}
</template>

【讨论】：

好吧，我明白了。谢谢！ ;)

【解决方案2】：

我刚刚发现了这个：Ractive.js !!

“这种 surgical DOM 操作比不断丢弃视图只重新渲染它们更有效，并且它的缩放比手动更新元素要优雅得多。（！）在这个例子中，Ractive .js 构建了一个并行的 DOM 表示，它知道它对 user 和 messages.unread 的值的依赖关系。 当这些值发生变化时，它会准确地知道真实 DOM 的哪些部分需要更新。”

http://www.ractivejs.org/ http://www.theguardian.com/info/developer-blog/2013/jul/24/ractive-js-next-generation-dom-manipulation

太棒了！去做例子：http://www.ractivejs.org/examples/和互动学习：http://learn.ractivejs.org/#!/hello-world/1

【讨论】：

【解决方案3】：

你应该看看那个网站：event mind.com 有一两个截屏视频可以让您了解流星的工作原理。这比我认为的文字答案要好

【讨论】：

您能否在答案中包含指向截屏视频的链接？
你可以看看那些：eventedmind.com/feed/ebe8aa64-3cf0-48d8-b3cf-6bd8c374b24f eventedmind.com/feed/d340ca14-d6f2-45a7-bfbe-3006540a0e74 以及 2 月的所有 Spark 截屏
@Rebolon 链接已损坏。 :(
@ian 是的，去eventedmind.com/feed?view=all 然后看看 2013 年 2 月的截屏视频，你会发现所有关于渲染和 Spark 的截屏视频