如何在Meteor中访问事件和子模板的助手
[英]How to access events and helpers of a child-template in Meteor
问题描述
There is an important edit at the end of this . 
在此结尾有一个重要的编辑 。
My Scenario: 我的场景：
<p>This is the parent template</p>
{{> childComponent }}
The childComponent consists of different UI-Elements allowing the user to generate some input . childComponent由不同的UI元素组成，允许用户生成一些输入 。 Think of the childComponent as a number-pad with a return-key <a class="btn" id="submitStuff">Submit</a> and some checkboxes. 可以将childComponent视为带返回键<a class="btn" id="submitStuff">Submit</a>和一些复选框的数字键盘。
The component is going to be used in different places in the app and each of the parent templates (using the component) make a different use of the childComponent 's output (the number and the information from the checkboxes). 该组件将在应用程序的不同位置使用，并且每个父模板（使用该组件）对childComponent的输出（复选框中的数字和信息）进行不同的使用。 The output is held as an Object in the Session . 输出在Session中作为Object保存 。
What I need to do 我需要做什么
When clicking the #submitStuff in the childComponent I want the childComponent's generated Object to be handled by a function in the wrapping parent-template. 当单击#submitStuff中的childComponent我希望childComponent的生成Object由包装父模板中的函数处理。
What I tried to do (and failed) 我试图做的（失败了）
Of course I placed all the common behavior of childComponent in it's own template helpers and events. 当然，我将childComponent所有常见行为放在其自己的模板帮助器和事件中。 But because each parent template would make another / different use of the child's data (using the number for different purposes and interpreting the checkboxes in different ways), I tried to listen to the submit-button in the childComponent from the parent's context . 但是因为每个父模板都会对孩子的数据进行其他/不同的使用（将数字用于不同的目的并以不同的方式解释复选框）， 所以我尝试从父上下文中childComponent中的childComponent -button 。
Template.parentTemplate.events({
// trying to listen to the "#submitStuff"-button INSIDE the child-template
// FAILS --> event is not visible to the outside of the child-component
'click #submitStuff': function () {
// get the information from the component
// nothing happens
}
});
This would be so easy. 这很容易。 Just to place the childComponent anywhere and decide from the parent-context what to do with it's generated value. 只是将childComponent放置在任何地方，并根据父上下文决定如何处理其生成的值。 But it fails. 但是失败了。
Does anybody have a suggestion? 有人有建议吗？
I thought about using the Session , but I am no fan of using the global space anytime I use the childComponent . 我曾考虑过使用Session ，但是我不喜欢在使用childComponent使用全局空间。
I thought about defining a function in the parent dealing with the submission and access that function from the childComponent . 我考虑过在父级中定义一个函数来处理提交，并从childComponent访问该函数。 But I did not get it to work / don't know how to do it. 但是我没有使它起作用/不知道如何去做。
What do you think? 你怎么看？
Thanks in advance! 提前致谢！
EDITs 编辑
#1 ＃1
I was hinted to the most straight forward way and simply listen to the event in the parent-template-events. 有人向我暗示了最直接的方法，只是在parent-template-events中监听该事件。 But as I wrote: "I tried to listen to the submit-button in the childComponent from the parent's context." 但是正如我写的那样：“我试图从父级上下文中childComponent中的childComponent -button。” It failed, the event never triggers anything in there (although it should!). 它失败了，该事件从不触发任何事件（尽管应该！）。 When I listen to it from INSIDE the childComponent itself , everything is fine. 当我从childComponent本身内部childComponent ，一切都很好。
This is my setup: http://meteorpad.com/pad/LWNKpfMCatSMhymhN/Copy%20of%20Parent-ChildTemplate 这是我的设置： http : //meteorpad.com/pad/LWNKpfMCatSMhymhN/Copy%20of%20Parent-ChildTemplate
(It works as it should and as it does not in my project). （它可以正常工作，而在我的项目中却没有）。
Does anybody know what could prevent an event from being caught in the parent template? 有人知道什么可以阻止事件被父模板捕获吗？
#2 ＃2
I just figured out that it has something to do with a plugin that I use: aldeed:template-extension . 我刚刚发现它与我使用的插件有关：aldeed：template-extension 。 After commenting out the line Template.parentTemplate.replace('someBaseParent'); 注释掉行Template.parentTemplate.replace('someBaseParent'); , it works as expected. ，它按预期工作。
Yet I don't know if I just made a mistake in my way of using the plugin or if there is an issue with it. 但是我不知道我在使用插件时是否犯了一个错误，或者是否有问题。
1 个解决方案
解决方案1
0 2015-10-06 10:40:00
Here is a minimal set of changes to the default meteor bootstrap code that shows you how an event in a parent template (Template.body in this case) can listen to events on elements defined in a child template (Template.hello), and access values from input elements contained in the child template. 这是对默认流星引导程序代码的最小更改集，向您展示了父模板（在这种情况下为Template.body）中的事件如何侦听子模板（Template.hello）中定义的元素上的事件以及如何访问子模板中包含的输入元素的值。
test.html: test.html：
<head>
<title>test</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
<template name="hello">
<button>Click Me</button>
<input type="number" id='num' value=""> // New input element
<p>You've pressed the button {{counter}} times.</p>
</template>
test.js test.js
if (Meteor.isClient) {
// counter starts at 0
Session.setDefault('counter', 0);
Template.hello.helpers({
counter: function () {
return Session.get('counter');
}
});
Template.body.events({ // event moved from Template.hello to parent Template.body
'click button': function () {
if (Template.instance().find('input').value === '') { // get value from child template's input element
// increment the counter when button is clicked
Session.set('counter', Session.get('counter') + 1);
} else {
Session.set('counter',
Number(Template.instance().find('input').value)); // get value from child template's input element
Template.instance().find('input').value = ''; // set value on child template's input element
}
},
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
http://meteorpad.com/pad/mNjoRHdRk97cAyx7C/Parent-ChildTemplate http://meteorpad.com/pad/mNjoRHdRk97cAyx7C/Parent-ChildTemplate
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.