Javascript 如何在Meteor中访问子模板的事件和帮助程序
这篇文章的结尾有一个重要的编辑Javascript 如何在Meteor中访问子模板的事件和帮助程序,javascript,meteor,Javascript,Meteor,这篇文章的结尾有一个重要的编辑 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': functio
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
}
});
我的设想:
这太容易了。只需将childComponent
放置在任意位置,并根据父上下文决定如何处理其生成的值。但它失败了
有人有什么建议吗?
我曾想过使用Session,但我不喜欢在任何时候使用childComponent
时使用全局空间
我考虑在父组件中定义一个函数来处理提交,并从childComponent
访问该函数。但是我没有把它用上/不知道怎么做
你觉得怎么样
提前谢谢
编辑
#1
我被暗示采用最直接的方式,只需在父模板事件中收听事件。但正如我所写的:“我试图从家长的上下文中听到childComponent
中的submit按钮。”它失败了,事件从未在那里触发任何东西(尽管它应该如此!)。当我从childComponent
本身的内部收听时,一切都很好
这是我的设置:
(在我的项目中,它可以正常工作,也可以不正常工作)
有人知道什么可以防止在父模板中捕获事件吗
#2
我刚刚发现它与我使用的插件&aldeed:template extension有关。注释掉行Template.parentTemplate.replace('someBaseParent')代码>,它按预期工作
然而,我不知道我是否只是在使用插件的方式上犯了错误,或者插件是否有问题。这里是对默认meteor引导代码的一组最小更改,它向您展示了父模板(本例中为template.body)中的事件如何侦听子模板(template.hello)中定义的元素上的事件,并从子模板中包含的输入元素访问值
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>
除了调用模板之外,如果看不到任何代码,就很难提供帮助。但是听起来你想创建一个方法,并在应用程序中的不同位置使用该方法?如果是这样的话,下面是关于它的教程您的hello
是我的“childComponent”。我试图从父模板帮助器中侦听事件'click button'
(按钮位于“childComponent”中),但事件'click button'
不会触发任何内容。仅当我从childComponent内部收听“单击按钮”
时。。。为什么会这样-/下面是上面使用Template.body上的事件在meteorpad上进行的工作。哦,我的。。。我就是这样做的,因为这是最直接的。。。但事实上:它对我不起作用。我就是这样做的(它在pad中工作,但在我的项目中不起作用:'-(问题似乎在其他地方。您知道在我的父模板中该事件可以防止什么吗?我认为当父模板完成渲染时,父模板事件处理程序将附加到dom。这是在子模板已经完成渲染以及在上定义的任何元素选择器时发生的。)父模板将在子模板中找到元素并将事件侦听器附加到它们。但是,因为您正在插入子模板(使用template.parentTemplate.replace('someBaseParent');
)仅呈现子模板,且仅附加其直接事件。父模板的事件不会附加到此新dom内容。
<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>
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
});
}