如何在Meteor中訪問事件和子模板的助手
[英]How to access events and helpers of a child-template in Meteor
問題描述
在此結尾有一個重要的編輯 。
我的場景：
<p>This is the parent template</p>
{{> childComponent }}
childComponent由不同的UI元素組成，允許用戶生成一些輸入 。 可以將childComponent視為帶返回鍵<a class="btn" id="submitStuff">Submit</a>和一些復選框的數字鍵盤。
該組件將在應用程序的不同位置使用，並且每個父模板（使用該組件）對childComponent的輸出（復選框中的數字和信息）進行不同的使用。 輸出在Session中作為Object保存 。
我需要做什么
當單擊#submitStuff中的childComponent我希望childComponent的生成Object由包裝父模板中的函數處理。
我試圖做的（失敗了）
當然，我將childComponent所有常見行為放在其自己的模板幫助器和事件中。 但是因為每個父模板都會對孩子的數據進行其他/不同的使用（將數字用於不同的目的並以不同的方式解釋復選框）， 所以我嘗試從父上下文中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
}
});
這很容易。 只是將childComponent放置在任何地方，並根據父上下文決定如何處理其生成的值。 但是失敗了。
有人有建議嗎？
我曾考慮過使用Session ，但是我不喜歡在使用childComponent使用全局空間。
我考慮過在父級中定義一個函數來處理提交，並從childComponent訪問該函數。 但是我沒有使它起作用/不知道如何去做。
你怎么看？
提前致謝！
編輯
＃1
有人向我暗示了最直接的方法，只是在parent-template-events中監聽該事件。 但是正如我寫的那樣：“我試圖從父級上下文中childComponent中的childComponent -button。” 它失敗了，該事件從不觸發任何事件（盡管應該！）。 當我從childComponent本身內部childComponent ，一切都很好。
這是我的設置： http : //meteorpad.com/pad/LWNKpfMCatSMhymhN/Copy%20of%20Parent-ChildTemplate
（它可以正常工作，而在我的項目中卻沒有）。
有人知道什么可以阻止事件被父模板捕獲嗎？
＃2
我剛剛發現它與我使用的插件有關：aldeed：template-extension 。 注釋掉行Template.parentTemplate.replace('someBaseParent'); ，它按預期工作。
但是我不知道我在使用插件時是否犯了一個錯誤，或者是否有問題。
1 個解決方案
解決方案1
0 2015-10-06 10:40:00
這是對默認流星引導程序代碼的最小更改集，向您展示了父模板（在這種情況下為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>
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
如何從Meteor 0.8.0 Blaze中的助手訪問模板實例
[英]How to access template instance from helpers in Meteor 0.8.0 Blaze
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.