6

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

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

  {{> leftbar}}

  {{> rightbar}}

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

我们在布局模板中包括例如 rightbar 模板。

<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模板不被重新渲染，而只是保持产量区域和模板更新？任何建议或替代方案将不胜感激。

4

2 回答 2

3

据我了解，重新渲染模板“冒泡”并导致重新渲染其父模板的行为并不是 Iron-router 或代码实现方式所特有的，而是 Spark 固有的。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 个月。

于 2013-11-11T17:09:52.050 回答
1

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

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

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

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

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

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

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

于 2013-11-12T01:13:53.287 回答