meteor铁路由器布局呈现
我们已经实现了主要内容驻留在dynamic侧边栏的布局。 我们定义了如下的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>
右栏模板包含我们将特定内容input到的右栏版本。
我们已经实现了下面的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
,并随着数据的变化而被更新和重新渲染。
现在的问题是,侧边栏是dynamicanimation,显示和隐藏。 现在每当profile
模板被重新渲染时, layout
模板也会被重新渲染 。 这是为什么? 我们认为产量区域的目的之一是整个站点不需要重新渲染。 现在,当布局被重新渲染时,animation的整个CSS被设置回原始值。
我们现在已经尝试了几种不同的方法,但没有一个似乎是一个很好的和干净的解决scheme。 有没有办法保持layout
模板不被重新渲染,只是保持屈服区域和模板更新? 任何build议或select将不胜感激。
据我了解,重新渲染模板“起泡”并导致其父模板重新渲染的行为并不是铁路由器或您的代码实现方式所特有的,而是Spark中固有的。 铁路由器的{{yield}}模式不会改变这种行为,据我可以从它的文档中知道。
好消息是,Spark将会被一个更新的,更精细的渲染引擎(目前代号为“Spacebars”)所迫切地取代,这应该可以缓解这种担忧。
以下是新的渲染系统的预览:
https://github.com/meteor/meteor/wiki/New-Template-Engine-Preview
这个一周前的讲话在描述通过新的渲染引擎带来的好处方面也非常出色(虽然相当长的一段时间,头5分钟给出了概述):
https://www.youtube.com/watch?v=aPf0LMQHIqk
至于你今天的select,你可以:
a)使用{{#constant}}和{{#isolate}}参数尝试限制重新渲染。
b)按照以上链接中的描述,从开发分支开展工作:
您可以使用template-engine-preview-4发行标签(使用meteor –release template-engine-preview-4运行您的应用程序),或通过签出鲨鱼来使用当前正在运行的代码版本分支(这是一个内部的代号)。
c)最重要的是,如果您的项目允许的时间范围允许重新渲染继续,直到meteor1.0命中和“Spacebars”驻留在主要分支 – 这听起来像是1-3个月。
我认为你的layout
模板被重新渲染的原因是因为你实现的data
钩子使用了一个被动数据源 。 如果当前用户对象发生变化,路由器可能会决定重新渲染整个页面,因为没有简单的方法来决定哪些部分完全依赖于您的反应数据。
如果我是对的,一个简单的解决scheme就是创build一个user
帮助器,它只会在实际需要的地方获取必要的数据,例如
Template.profile.user = function () { return Meteor.users.findOne({/*...*/}); }
然后,你可以在你的profile
模板中使用它with
帮助器(原文!),即
{{#with user}} ... {{/with}}
以防止多次调用Template.profile.user
函数。
另外,如果我是你,我将只使用我的布局中的模板所需的数据。