Question

我是Meteor的新手并尝试在Meteor模板中添加按钮点击事件。我想使用类名获取按钮ID（accountId）。下面是我简化的html和javaScript：

HTML：

<template name="accountList">         
  <table class="table table-hover table-responsive">
    <thead>
      <tr>
        <th>Id</th>
        <th>Email</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
            {{#each accountDetails}}
                <tr>
                {{#with profile}}
                    <td>{{Id}}</td>
                    <td>{{email}}</td>
                    <td><button type="button" value="{{accountID}}" class="edit_button btn btn-default">Edit</button></td>
                {{/with}}
                </tr>
            {{/each}}
    </tbody>
  </table>
</template>

JavaScript的：

Template.accountList.events({
    'click .edit_button': function(){
        alert(this.value);
        //var selectedAccount = this.value;
        //Session.set('selectedAccount', selectedAccount);
    }
});

点击编辑按钮时，我收到一条警告说＆＃34;未定义＆＃34;。我看到了类似的question，但它对我不起作用。尝试了这个method，同样的输出。有没有其他Meteor方法来实现这个？有什么帮助吗？

Answer 1

使用嵌套模板更简单，更流行的解决此问题的方法是：

<template name="accountList">         
  <table class="table table-hover table-responsive">
    <thead>
      <tr>
        <th>Id</th>
        <th>Email</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {{#each accountDetails}}
        {{> profileTemplate }}
      {{/each}}
    </tbody>
  </table>
</template>

<template name="profileTemplate">
  <tr>
    {{#with profile}}
      <td>{{Id}}</td>
      <td>{{email}}</td>
      <td><button type="button" class="edit_button btn btn-default">Edit</button></td>
    {{/with}}
  </tr>
</template>

<强> JS：

Template.profileTemplate.events({
  'click .edit_button': function(event){
    Session.set('selectedAccount', this.accountID);
  }
});

通过将事件附加到内部模板而不是外部模板，结果是数据上下文this将是profile的值

Answer 2

这不是Meteor的问题。你可以用javascript本身完成它。尝试：

Template.accountList.events({
    'click.edit_button': function(event){
        alert(event.target.value);
    }
});

从Meteor模板按钮单击事件获取按钮值

2 个答案: