Meteor:在click事件上向表元素添加一个类

Question

我有一个包含几个表行的表,所以我创建了一个click事件,myCollection在单击特定td元素时更新,这很好用.我想要做的是显示一个bootstrap"tick",表示单击时该元素处于"活动"状态.

如果我$('.activate').addClass('glyphicon glyphicon-ok');在控制台上运行它会将类添加到类的所有元素.activate而不是触发事件的类.我也可以在下面的函数中运行这一行,结果相同.

我似乎无法使用以下代码完成此工作:

'click .activate': function (event, template) {

     var id=event.target.getAttribute("data-id");

      myCollection.update({_id: id}, {$set: {status: "active"}});

      // I've tried variations of the line below with no success
      $(this).closest("td").addClass("glyphicon glyphicon-ok");

 }

此外,当页面重新加载时,我想在正确的位置显示"tick".我不确定如何做到最好.我不能这样做,例如:

{{#each myCollection}}
  {{#if status=="active"}}
     <p>display stuff</p>
  {{/if}}
{{/each}}

我有什么想法可以让这个工作吗？

提前致谢 :)

Answer 1

在事件处理程序内部,this是被单击的元素的上下文,而不是元素本身.更"流星"的方式是使用反应性而不是jQuery来更新DOM.

<template name="table">
  {{#each myCollection}}
    {{> tr}}
  {{/each}}
</template>

<template name="tr">
  <td class="activate">Activate</td>
  <td>
    {{#if active}}
    <span class="glyphicon glyphicon-ok"></span>
    {{/if}}
  </td>
</template>

Template.table.myCollection = function () {
  return myCollection.find();
};

Template.tr.active = function () {
  return this.status === "active";
};

Template.tr.events({
  'click .activate': function (event, template) {
    myCollection.update(this._id, {$set: {status: "active"}});
  }
});