流星模板活动(Meteor Template Events)

我试图让流星的保持还是那么有可能是一个简单的答案来此，我希望是这样。 我有这个功能，工作原理，并点击我的按钮时返回正确的ID。

$(document).ready(function(){
$("button").click(function(){
    var selection = (this.id);
    boardSpecs[0] = selection;
        return boardSpecs;
    });
});

我要制作成流星点击事件，这样的事情这一点。

Template.selectBoard.events({
'click button' : function (event) {
    event.preventDefault();
    var boardType = event.target.id;
    Session.set('boardType', boardType);
    alert(boardType);
    }
});

这是按钮所在的模板。

<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>

Answer 1:

假设按钮是模板的一部分，你的代码是接近直角的。 唯一不同的是， this会不会指向按钮，所以你需要从事件得到它：

Template.selectBoard.events({
'click button' : function (event) {
    event.preventDefault();
    var boardType = event.target.id;
    Session.set('boardType', boardType);
    alert(boardType);
    }
});

Answer 2:

让我们更容易些。 您的按钮被定义为：

<button type = "button" id = "{{id}}" class = "btn btn-primary">Select</button>

而你的事件处理程序正在试图获得的按钮，这是的id {{ID}}。

如果您使用嵌套的模板如下：

<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>

然后在此事件处理程序将在个人板的数据上下文，你可以简单的写：

Template.selectBoard.events({
  'click button' : function (event) {
    event.preventDefault();
    var boardType = this.id;
    Session.set('boardType', boardType);
    alert(boardType);
  }
});

我认为这是更白水台 （借用Python的一个形容词）。 我也想避免使用，因为与自然MongoDB的文档标识符_id潜在混乱的变量名ID。

Answer 3:

最后我用身体活动和它的工作的时候了。 不知道为什么，但它没有。

Template.body.events({
'click #selected' : function(event){
    event.preventDefault();
    Session.set('board',event.target.id);
    }
});

文章来源: Meteor Template Events