使用流星中的JavaScript事件在多个预设字段之间切换MongoDB文档

Question

我正在尝试创建一个流星事件，以更新文档的"类"模板部分时的"类"字段。我需要在该场的3个单独的预设值之间旋转。到目前为止

Template.buttonGrey.events({
 "click .toggleGrey": function (e) {
   if($(this).hasClass("myButtonGrey")) {
    ButtonsGrey.update(this._id, {$set: {class: "myButtonGreyBlinkFast"}});
   } else if ($(this).hasClass("myButtonGreyBlinkFast")) {
    ButtonsGrey.update(this._id, {$set: {class: "myButtonGreyBlinkSlow"}});
   } else {
    ButtonsGrey.update(this._id, {$set: {class: "myButtonGrey"}});
   }
 },
});

也是我的HTML流星模板的副本。

<template name="buttonGrey">
<a href="#" class="toggleGrey {{class}}">{{number}}</a>
</template>

Answer 1

选择触发事件的元素（和不是文档本身）时，您应该使用$(e.target)代替$(this)：

Template.buttonGrey.events({
 "click .toggleGrey": function (e) {
   if($(e.target).hasClass("myButtonGrey")) {
    ButtonsGrey.update(this._id, {$set: {class: "myButtonGreyBlinkFast"}});
   } else if ($(e.target).hasClass("myButtonGreyBlinkFast")) {
    ButtonsGrey.update(this._id, {$set: {class: "myButtonGreyBlinkSlow"}});
   } else {
    ButtonsGrey.update(this._id, {$set: {class: "myButtonGrey"}});
   }
 },
});

但给定数据上下文，您可以直接使用this（在这种情况下为文档），而无需jQuery：

Template.buttonGrey.events({
 "click .toggleGrey": function (e) {
   if(this.class === "myButtonGrey") {
    ButtonsGrey.update(this._id, {$set: {class: "myButtonGreyBlinkFast"}});
   } else if (this.class === "myButtonGreyBlinkFast") {
    ButtonsGrey.update(this._id, {$set: {class: "myButtonGreyBlinkSlow"}});
   } else {
    ButtonsGrey.update(this._id, {$set: {class: "myButtonGrey"}});
   }
 },
});