Meteor Iron-Router 布局渲染

Question

我们已经实现了主要内容位于动态侧边栏中的布局。我们定义如下layoutTemplate：

<template name="layout">
  {{> content}}

  {{> leftbar}}

  {{> rightbar}}

  <nav class="navigation">
      {{#if currentUser}}
          {{> navigation_logged_in}}
      {{else}}
          {{> navigation_logged_out}}
      {{/if}}
  </nav>
</template>

我们包括例如布局模板中的右栏模板。

<template name="rightbar">
  <aside class="rightbar">
      <button id="closeRightBar" class="close-cross"></button>

      {{yield 'rightbar'}}
  </aside>
</template>

rightbar 模板包括我们在其中生成特定内容的 rightbar yield。

我们已经实现了以下 RouteController：

UserShowRouter = RouteController.extend({

  before: function() {
      var username = this.params.username;
      if(App.subs.user) {
          App.subs.user.stop();
      }
      App.subs.user = Meteor.subscribe('user', username);
  },

  waitOn: function () {
    return Meteor.subscribe('user');
  },

  data: function() {
      return Meteor.users.findOne({'profile.username': this.params.username});
  },

  action: function() {
      this.render('profile', {to: 'rightbar'});
  }

});

我们想要实现的是，例如 profile 模板被生成到 rightbar 产量中，并随着数据的变化而更新和重新呈现。

现在的问题是侧边栏是动态动画、显示和隐藏的。现在每次profile 模板被重新渲染layout 模板也被重新渲染。这是为什么？我们认为 yield region 的目的之一是整个站点不需要重新渲染。现在，当重新渲染布局时，动画的整个 css 都将设置回原始值。

我们现在尝试了几种不同的方法，但似乎都不是一个好的、干净的解决方案。有没有办法让layout 模板不被重新渲染，而只是保持产量区域和模板更新？任何建议或替代方案将不胜感激。

Answer 1

据我了解，重新渲染模板“冒泡”并导致重新渲染其父模板的行为并不是 Iron-router 或您的代码实现方式所特有的，而是固有的火花。 Iron-router 的 {{yield}} 模式并没有改变这种行为，据我从它的文档中可以看出。

好消息是 Spark 即将被更新的、更细粒度的渲染引擎取代，目前代号为“空格键”，这应该可以缓解这种担忧。

这是新渲染系统的预览：

https://github.com/meteor/meteor/wiki/New-Template-Engine-Preview

一周前的这次演讲也非常出色地描述了新渲染引擎带来的好处（虽然相当长，但前 5 分钟给出了概述）：

https://www.youtube.com/watch?v=aPf0LMQHIqk

至于你今天的选择，你可以：

a) 使用 {{#constant}} 和 {{#isolate}} 参数来尝试限制重新渲染。

b) 如上面链接中所述，从开发分支工作：

您可以使用 template-engine-preview-4 发布标签（使用 meteor --release template-engine-preview-4 运行您的应用程序）或通过检查出鲨鱼分支（这是一个内部代号）。

c) 最重要的是，如果您的项目的时间框架允许重新渲染继续进行，直到 Meteor 1.0 命中并且“空格键”驻留在主分支上 - 听起来这需要 1-3 个月。

Answer 2

我认为你的layout 模板被重新渲染的原因是因为你实现的data 钩子使用了一个反应性数据源。如果当前用户对象发生变化，路由器可能会决定重新渲染整个页面，因为没有简单的方法可以确定哪些部分完全取决于您的反应数据。

如果我是对的，解决您的问题的一个简单方法是创建一个 user 助手，它只会在实际需要的地方获取必要的数据，例如

Template.profile.user = function () {
    return Meteor.users.findOne({/*...*/});
}

然后您可以在 profile 模板中使用它以及 with 助手（原文如此！），即

{{#with user}}
    ...
{{/with}}

防止多次调用Template.profile.user 函数。

另外，如果我是你，我会仅将 data 挂钩用于我的布局中的模板所需的数据。