メインコンテンツが動的サイドバーにあるレイアウトを実装しました。以下を定義しました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テンプレートがrightbaryieldに生成され、データの変更に応じて更新および再レンダリングされることです。
問題は、サイドバーが動的にアニメーション化され、表示され、非表示になることです。profileテンプレートが再レンダリングされるたびに、テンプレートもlayout再レンダリングされます。何故ですか？イールド リージョンの目的の 1 つは、サイト全体を再レンダリングする必要がないことだと考えました。レイアウトが再レンダリングされると、アニメーションの css 全体が元の値に戻されます。
現在、いくつかの異なるアプローチを試しましたが、どれも適切でクリーンなソリューションではないようです。layoutテンプレートが再レンダリングされないようにして、yield リージョンとテンプレートを最新の状態に保つ方法はありますか? 任意の提案や代替案をいただければ幸いです。