Meteor，从父模板调用子模板中的函数
Posted
技术标签:
【中文标题】Meteor，从父模板调用子模板中的函数【英文标题】：Meteor, call function in child template from parent template 【发布时间】：2015-01-29 12:31:04 【问题描述】：如果我有一个父模板 Container 和一个子模板 Content avec 只有一个按钮：
<head>
<title>test</title>
</head>
<body>
> Container
</body>
<template name="Container">
# Content callback = callBack
<button>ok</button>
/Content
</template>
<template name="Content">
> UI.contentBlock
</template>
如果可以将函数传递给callback。像这样：
Template.Container.helpers(
callBack: function ()
return function ()
console.log( 'this is my callback' );
);
所以在我的内容模板中，我可以从我的父模板中调用一个函数。比如这样：
Template.Content.events(
'click button': function ( e, tmpl )
tmpl.data.callback();
);
但有时，我需要以另一种方式实现它。父母在他的孩子中调用一个函数。你的做法是什么？
编辑：
我将它保存在一个流星垫中以显示它并使其易于分叉：http://meteorpad.com/pad/48NvCFExxW5roB34N/test-pass-callback-to-parent
【问题讨论】：
【参考方案1】：根据我使用 Meteor 的经验，它似乎更倾向于事件驱动的 UI 设计。这意味着您不会直接调用父方法或子方法，而是会触发自定义事件或设置 Session 变量。所以你可以这样做：
Template.Container.helpers(
callBack: function ()
Session.get('button.lastClickTime');
console.log( 'this is my callback' );
);
Template.Content.events(
'click button': function ( e, tmpl )
Session.set('buttom.lastClickTime', new Date());
);
Session 对象是响应式的，所以只要设置了 'button.lastClickTime' Session 值，就会调用回调方法。
然后您可以反转 set/get 调用以从父级通知子级。
【讨论】：
【参考方案2】：您可以在父模板上注册一个事件处理程序，通过使用匹配子模板中元素的选择器来触发子模板中的事件，如下所示：
Template.Container.events( // 'Container' is the parent template
'click button': function ( e, tmpl ) // Selector for an element in the child-template*
// You will now have access to the parent's context instead of the child's here.
);
*) 假设父模板中没有其他按钮。如果是这样，请为按钮设置一个唯一名称，以便您可以从父级中唯一地选择它。
【讨论】：
这可能适用于另一种情况。但在我的，Content 是一个组件，会在父模板中出现多次。目标是从父级访问子上下文，而不是从子级访问父级。【参考方案3】：
这是您可以使用的模式。定义一个类Child和一个模板child；这个想法是在child 模板中，数据上下文是一个Child 实例。例如，我将创建一个组件，它有一个可以通过按下按钮来递增的数字。
<template name="child">
<button class="increment">number.get</button>
</template>
function Child()
this.number = new ReactiveVar(0);
Template.child.events(
"click .increment": function ()
this.number.set(this.number.get() + 1);
);
在父级的created 回调中，创建一个Child 实例并将其存储在模板实例中。然后在父模板中，调用child，传入Child作为数据上下文：
Template.parent.created = function ()
this.childInstance = new Child();
Template.parent.helpers(
childInstance: function ()
return Template.instance().childInstance;
);
<template name="parent">
> child childInstance
</template>
现在您可以在Child 原型上定义方法并从父模板中调用它们，例如：
Child.prototype.getNumberTimesTwo = function ()
return this.number.get() * 2;
<template name="parent">
> child childInstance
That number multiplied by two is: childInstance.getNumberTimesTwo
</template>
【讨论】：
我之前使用event emitter 进行模板之间的通信，您将事件发射器传递给子模板，就像上面一样，它工作得很好。子模板也可以发出事件被父模板接收。【参考方案4】：您还可以在子级中创建模板函数，然后在创建子级时将其设置在父级上。这需要使用meteor-template-extension 包。不过，如果您深入研究该软件包，您可以只提取执行 parent() 函数的代码。
Template.child.onCreated(function()
let instance = this;
instance.someFunction = function() ...;
instance.parent(1, false).someFunction = instance.someFunction;
);
然后这可以由父级在事件处理程序（或任何地方）中调用。
【讨论】：
以上是关于Meteor，从父模板调用子模板中的函数的主要内容，如果未能解决你的问题，请参考以下文章