現在のテンプレートの親テンプレートを取得するためのクリーンな方法はありますか? MeteorのAPIには公式に文書化されているものはありません。私は、コンテキストではなく、Blaze.TemplateInstance
について話している(つまり、Template.parentData
ではない)。
最後に、Meteorの parentData
と同様に、次のようにテンプレートインスタンスを拡張しました。
_/**
* Get the parent template instance
* @param {Number} [levels] How many levels to go up. Default is 1
* @returns {Blaze.TemplateInstance}
*/
Blaze.TemplateInstance.prototype.parentTemplate = function (levels) {
var view = this.view;
if (typeof levels === "undefined") {
levels = 1;
}
while (view) {
if (view.name.substring(0, 9) === "Template." && !(levels--)) {
return view.templateInstance();
}
view = view.parentView;
}
};
_
使用例:someTemplate.parentTemplate()
で直接の親を取得
現在のテンプレートの親テンプレートを取得するためのクリーンな方法はありますか?
現在、私が知っていることはありませんが、これは計画された「再利用可能なコンポーネントを設計するためのより良いAPI」の一部として将来いつか起こると思われます(これは Meteor post 1.0ロードマップ で説明されています)。
今のところ、これが私のプロジェクトで使用している回避策です:
// extend Blaze.View prototype to mimick jQuery's closest for views
_.extend(Blaze.View.prototype,{
closest:function(viewName){
var view=this;
while(view){
if(view.name=="Template."+viewName){
return view;
}
view=view.parentView;
}
return null;
}
});
// extend Blaze.TemplateInstance to expose added Blaze.View functionalities
_.extend(Blaze.TemplateInstance.prototype,{
closestInstance:function(viewName){
var view=this.view.closest(viewName);
return view?view.templateInstance():null;
}
});
これは名前付きの親テンプレートのみをサポートし、jQuery closest
と同じように機能して、親ビューノードを子から最上位のテンプレート(本体)までトラバースし、適切な名前のテンプレートを検索することに注意してください。
Blazeのこの拡張機能がクライアントコードのどこかに登録されると、次のようなことができます。
HTML
<template name="parent">
<div style="background-color:{{backgroundColor}};">
{{> child}}
</div>
</template>
<template name="child">
<button type="button">Click me to change parent color !</button>
</template>
JS
Template.parent.created=function(){
this.backgroundColor=new ReactiveVar("green");
};
Template.parent.helpers({
backgroundColor:function(){
return Template.instance().backgroundColor.get();
}
});
Template.child.events({
"click button":function(event,template){
var parent=template.closestInstance("parent");
var backgroundColor=parent.backgroundColor.get();
switch(backgroundColor){
case "green":
parent.backgroundColor.set("red");
break;
case "red":
parent.backgroundColor.set("green");
break;
}
}
});
これまで私が行ってきたことは、子テンプレートの関数で親インスタンスにアクセスする必要がある場合、代わりにこの関数をリファクタリングしてparentテンプレートで宣言し、それを渡すことです。子への引数として、子はそれを実行できます。
例として、子テンプレート内から親テンプレートのテンプレート変数をインクリメントしたいとします。私はこのようなものを書くことができます:
Template.parentTemplate.onCreated(function () {
var parentInstance = this;
parentInstance.count = new ReactiveVar(1);
});
Template.parentTemplate.helpers({
incrementHandler: function () {
var parentInstance = Template.instance();
var count = parentInstance.count.get();
return function () {
var newCount = count + 1;
parentInstance.count.set(newCount);
};
}
});
次に、私の子テンプレートを含めます。
{{> childTemplate handler=loadMoreHandler}}
そして、私のイベントを設定します。
Template.childTemplate.events({
'click .increment-button': function (event, childInstance) {
event.preventDefault();
childInstance.data.handler();
}
});
延長したくない場合はBlaze.TemplateInstance
次のように親インスタンスにアクセスできます:
Template.exampleTemplate.onRendered(function () {
const instance = this;
const parentInstance = instance.view.parentView.templateInstance();
});
Meteor1.4.xでのみテスト済み
Aldeedのtemplate-extension のようなパッケージを使用できます
次の方法が利用できます。
templateInstance.parent(numLevels, includeBlockHelpers)