流星,父模板中子模板中的调用函数

问题描述 投票:9回答:4

如果我有一个父模板Container,而一个子模板Content仅使用一个按钮:

<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

meteor meteor-blaze
4个回答
16
投票

这是您可以使用的模式。定义一个类Child和一个模板child;这个想法是在child模板内部,数据上下文是Child实例。例如,我将创建一个组件,该组件的数字可以通过按一个按钮来递增。


2
投票

根据我在Meteor上的经验,似乎它更喜欢事件驱动的UI设计。这意味着您不会直接直接调用父方法或子方法,而是会触发自定义事件或设置Session变量。因此,您可以执行以下操作:


1
投票

您可以在父模板上注册一个事件处理程序,该事件处理程序通过使用与子模板中的元素匹配的选择器来触发子模板中的事件,如下所示:


0
投票

您还可以在子代中创建模板函数,然后在创建子代时在父代上设置模板函数。这需要使用meteor-template-extension程序包。尽管如果您深入研究该软件包,则可以只提取执行parent()功能的代码。

© www.soinside.com 2019 - 2024. All rights reserved.