web-dev-qa-db-ja.com

（現在のテンプレートの）親テンプレートインスタンスを取得する方法

現在のテンプレートの親テンプレートを取得するためのクリーンな方法はありますか？ MeteorのAPIには公式に文書化されているものはありません。私は、コンテキストではなく、Blaze.TemplateInstanceについて話している（つまり、Template.parentDataではない）。

meteormeteor-blaze
17
Bogdan D

最後に、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()で直接の親を取得

29
Bogdan D

現在のテンプレートの親テンプレートを取得するためのクリーンな方法はありますか？

現在、私が知っていることはありませんが、これは計画された「再利用可能なコンポーネントを設計するためのより良い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;
    }
  }
});
11
saimeunt

これまで私が行ってきたことは、子テンプレートの関数で親インスタンスにアクセスする必要がある場合、代わりにこの関数をリファクタリングして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();
  }
});
9
Sacha

延長したくない場合はBlaze.TemplateInstance次のように親インスタンスにアクセスできます：

Template.exampleTemplate.onRendered(function () {
  const instance = this;
  const parentInstance = instance.view.parentView.templateInstance();
});

Meteor1.4.xでのみテスト済み

2
Spencer

Aldeedのtemplate-extension のようなパッケージを使用できます

次の方法が利用できます。

templateInstance.parent(numLevels, includeBlockHelpers)
1
lukasvo