<模板名称 = "selectBoard"><div 类 = "容器"><div class = "boardCarousel">{{#each boardList}}<div class = "span1"><div 类 = "缩略图"><img data-src = "{{source}}" alt = "placeholder" class = "img-rounded"><div class = "东西"><h2>{{name}}</h2><p>{{描述}}</p><button type = "button" id = "{{id}}" class = "btn btn-primary">选择</button>
{{/每个}}
解决方案
让我们简化一下.您的按钮定义为:
并且您的事件处理程序正在尝试获取按钮的 id，即 {{id}}.
如果您使用嵌套模板如下:
<模板名称 = "selectBoard"><div 类 = "容器"><div class = "boardCarousel">{{#each boardList}}{{>木板}}{{/每个}}
<模板名称="板"><div class = "span1"><div 类 = "缩略图"><img data-src = "{{source}}" alt = "placeholder" class = "img-rounded"><div class = "东西"><h2>{{name}}</h2><p>{{描述}}</p><按钮类型=按钮"类=btn btn-primary">选择</button>
I'm trying to get a hold of meteor still so there might be an easy answer to this and i'm hoping that is the case. I have this function which works and returns the correct id when my button is clicked.
I want to make this into a meteor click event, something like this.
Template.selectBoard.events({
'click button' : function (event) {
event.preventDefault();
var boardType = event.target.id;
Session.set('boardType', boardType);
alert(boardType);
}
});
This is the template where the button exists.
<template name = "selectBoard">
<div class = "container">
<div class = "boardCarousel">
{{#each boardList}}
<div class = "span1">
<div class = "thumbnail">
<img data-src = "{{source}}" alt = "placeholder" class = "img-rounded">
<div class = "something">
<h2>{{name}}</h2>
<p>{{description}}</p>
<button type = "button" id = "{{id}}" class = "btn btn-primary">Select</button>
</div>
</div>
</div>
{{/each}}
</div>
</div>
解决方案
Let's make this easier. Your button is defined as:
<button type = "button" id = "{{id}}" class = "btn btn-primary">Select</button>
And your event handler is trying to get at the id of the button which is {{id}}.
If you use nested templates as follows:
<template name = "selectBoard">
<div class = "container">
<div class = "boardCarousel">
{{#each boardList}}
{{> board}}
{{/each}}
</div>
</div>
</template>
<template name="board">
<div class = "span1">
<div class = "thumbnail">
<img data-src = "{{source}}" alt = "placeholder" class = "img-rounded">
<div class = "something">
<h2>{{name}}</h2>
<p>{{description}}</p>
<button type = "button" class = "btn btn-primary">Select</button>
</div>
</div>
</div>
</template>
Then this in your event handler will be the data context of the individual board and you can simply write:
Template.selectBoard.events({
'click button' : function (event) {
event.preventDefault();
var boardType = this.id;
Session.set('boardType', boardType);
alert(boardType);
}
});
I'd argue that this is more Meteoric (to borrow an adjective from Python).
I'd also avoid using the variable name id because of the potential confusion with the natural MongoDB document identifier _id.
