如何打开按钮和颠倒他们与流星事件？ [英] How to turn buttons and reverses them with Meteor events?

问题描述

我正在使用Meteor和Bootstrap。我做了一个按钮，使它变成：

I'm working with the Meteor and the Bootstrap. I made a button that turns it:

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

：

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

现在如何做相反的过程？
我的模板：

Now how do the reverse process? My templates:

<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>");
  },
});

我尝试在同一个模板上执行另一个事件，但不工作。我尝试创建另一个事件模板，但不工作。

I try to do another event on the same template, but does not work. I try to create another template of events, but does not work. What do I do?

推荐答案

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

Why not using a dynamic text for your button ?

<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');
  }
});

更新

或者您可以用一个简单的条件更改您的按钮：

Or you could change your button with a simple condition:

{{#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}}

In the template, something like this

Template.favoriteButton.helpers({

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

});

这篇关于如何打开按钮和颠倒他们与流星事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！