如何使用 Meteor 事件转动按钮并反转它们？

Question

我正在使用 Meteor 和 Bootstrap。我做了一个按钮来转动它：

<button type="button" class="btn btn-default btn-lg active">Favoritar</button>

为此：

<button type='button' class='btn btn-primary btn-lg active'>Favorito</button>

现在怎么做逆过程？ 我的模板：

<template name="favoriteButton">
<button type="button" class="btn btn-default btn-lg active">Favoritar</button>
</template>

---

Template.favoriteButton.events({
"click .btn-default": function (event, template) {
  $(".btn-default").remove();
  $("body").append("<button type='button' class='btn btn-primary btn-lg active'>Favorito</button>");
  },
});

我尝试在同一个模板上执行另一个事件，但不起作用。我尝试创建另一个事件模板，但不起作用。我该怎么办？

Answer 1

为什么不为您的按钮使用动态文本？

<button type='button' class='btn btn-primary btn-lg active'>{{text}}</button>

在你的模板中：

var text = 'Favoritar';

Template.favoriteButton.onCreated(function() {
  Session.set(text , 'Favoritar');
});

Template.favoriteButton.helpers({

  text: function(){
    return Session.get(text);
  },

});
Template.favoriteButton.events({
  "click .btn-default": function (event, template) {
    SetSession(text, 'Favorito');
  }
});

更新

或者你可以用一个简单的条件来改变你的按钮：

{{#if isFavorite}}
<button type='button' class='btn btn-default btn-lg active'>Favoritar</button>
{{else}}
<button type='button' class='btn btn-primary btn-lg active'>Favorito</button>
{{/if}}

在模板中，像这样

Template.favoriteButton.helpers({

  isFavorite: function(){
    return Session.get(text) == "Favoritar"; // or better with a boolean variable
  },

});