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>

右栏模板包括我们将特定内容输入的右栏收益率。

我们已经实现了以下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 yield并且随着数据的变化得到更新和重新呈现。

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

我们现在尝试了几种不同的方法，但它们似乎都不是一个好的和干净的解决方案。有没有办法保持layout模板不被重新渲染，只是保持屈服区域和模板更新？任何建议或替代方案都将受到高度赞赏。

Answer 1

据我了解，重新呈现模板的行为＆＃34;起泡＆＃34;并且导致重新呈现其父模板并不特定于铁路由器或代码的实现方式，而是Spark中固有的。据我所知，Iron-router的{{yield}}模式不会改变这种行为。

好消息是，Spark将立即被更新，更细粒度的渲染引擎所取代，目前代号为＃34; Spacebars，＆＃34;这应该可以缓解这种担忧。

以下是新渲染系统的预览：

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

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

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

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

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

b）按照以上链接中的说明从开发分支开始工作：

您可以使用template-engine-preview-4发布标记（使用meteor -release template-engine-preview-4运行您的应用）或通过检查来使用当前正在进行的代码版本鲨鱼分支（它是一个内部代号）。

c）最重要的是，如果你的项目允许的时间范围是允许重新渲染继续，直到Meteor 1.0命中并且＆＃34; Spacebars＆＃34;居住在主要分支上 - 听起来这是1-3个月之后。

Answer 2

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

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

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

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

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

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

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

流星铁路由器布局渲染

2 个答案: