如何获取父模板实例(当前模板的实例)?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (25)

是否有一种简洁的方法来获取当前模板的父模板?在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;
    }
};

用户回答回答于

是否有一种简洁的方法来获取当前模板的父模板?

目前,我不知道,但这应该是计划中的“设计可重用组件的更好的api”的一部分

目前,我在我的项目中使用了一个解决方案:

// 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若要将父视图节点从子视图遍历到最顶部的模板(主体),请搜索适当命名的模板。

一旦在客户端代码中的某个地方注册了BREZE的扩展,你就可以这样做:

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;
    }
  }
});

扫码关注云+社区