node.js - meteor 铁-路由器布局效果图

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，我们将特定内容 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 模板被 yield 到 rightbar yield 中，并随着数据的变化而更新和重新呈现。

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

我们现在已经尝试了几种不同的方法，但似乎没有一种是好的和干净的解决方案。有没有一种方法可以防止 layout 模板被重新渲染，而只是保持 yield region 和模板是最新的？任何建议或替代方案将不胜感激。

Answer 1

据我了解，重新渲染模板“冒泡”并导致重新渲染其父模板的行为并不是 iron-router 或代码实现方式所特有的，而是固有的 Spark 。据我从其文档中得知，Iron-router 的 {{yield}} 模式不会改变此行为。

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

这是新渲染系统的预览:

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

一周前的这篇演讲也很好地描述了新渲染引擎带来的好处(虽然时间相当长，但在前 5 分钟内给出了概述):

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

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

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

b) 从上面链接中描述的开发分支工作:

You can play with the current work-in-progress version of the code using the template-engine-preview-4 release tag (run your app with meteor --release template-engine-preview-4), or by checking out the shark branch (it's an internal codename).

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