流星模板事件答案

【问题标题】：Meteor Template Events流星模板事件
【发布时间】：2015-05-07 07:03:27
【问题描述】：

我仍在尝试获取流星，因此可能会有一个简单的答案，我希望是这样。我有这个功能，当我的按钮被点击时，它可以工作并返回正确的 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>

【问题讨论】：

你能把console.log(event.currentTarget.id)的结果贴出来吗？
没有任何记录。我不确定这对这种情况意味着什么。

标签： meteor

【解决方案1】：

我最终使用了一个身体事件，它立即起作用了。不知道为什么，但确实如此。

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

【讨论】：

【解决方案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>

然后，您的事件处理程序中的 this 将是单个 board 的数据上下文，您可以简单地编写：

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

我认为这更像是 Meteoric（借用 Python 的形容词）。我也会避免使用变量名 id，因为它可能与自然的 MongoDB 文档标识符 _id 混淆。

【讨论】：

【解决方案3】：

假设按钮是模板的一部分，那么您的代码几乎是正确的。唯一不同的是this 不会指向您的按钮，因此您需要从事件中获取它：

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

【讨论】：

我更新了活动，但仍然无法正常工作。我添加了按钮所在的模板。