如何获取（当前模板的）父模板实例

Question

有没有一种干净的方式来获取当前模板的父模板？ Meteor的API没有正式记录。 我在说的是Blaze.TemplateInstance，而不是上下文（即不是Template.parentData）。

Answer 1

最后，我使用流星的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()获得直接父

Answer 2

有没有一种干净的方式来获取当前 模板的父模板？

目前，没有，我知道的，但这应该在未来的计划“设计的可重用组件更好的API”的一部分，有时发生（这是在Meteor post 1.0 roadmap讨论）。

就目前而言，这里是我用在我的项目解决方法：

// 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遍历父查看从一个孩子到最顶层模板（正文）的节点，搜索适当命名的模板。

一旦这个扩展大火已在客户端代码的地方注册，你可以做这样的东西：

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

Answer 3

我到目前为止一直在做的是，如果我需要访问一个子模板的功能父实例，我尝试，而不是重构这个函数声明它在父级模板上，然后将它作为参数传递给子，然后可以执行它。

作为一个例子，假设我想在子模板中的父模板上增加一个模板变量。我可以写这样的事：

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

Answer 4

如果你不希望延长Blaze.TemplateInstance你可以像这样访问父实例：

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

只在流星1.4.x测试过