使用 JS 更改 Meteor 中的按钮文本答案

【问题标题】：Change button text in Meteor with JS使用 JS 更改 Meteor 中的按钮文本
【发布时间】：2016-05-31 06:41:52
【问题描述】：

我的点击按钮显示和隐藏包含评论部分的 div。现在我想让他在点击时更改文本。因此，您单击一次，您可以看到 cmets，但现在需要的是“隐藏 cmets”，而不是“显示 cmets”。我尝试了几种在互联网上找到的解决方案以及一些对我来说合乎逻辑的解决方案，但它不起作用。我也试过this，但它说 SetSession 没有定义。

模板：

<template name="PrikažiMe">

<button class="PrikažiKomentar"> {{текст}} </button>

</template>

if (Meteor.isClient) {


  /*  Template.PrikažiMe.onCreated(function() {
        Session.set(текст , 'Прикажи коментаре');  // <---- This part makes like everything is unpublished
    }); */


    Template.PrikažiMe.events({
      'click .PrikažiKomentar': function(){

        if (document.getElementById(this._id).style.display == "none") 
            { document.getElementById(this._id).style.display = "inline-flex", SetSession (текст, 'Сакриј коментаре');}
        else {document.getElementById(this._id).style.display = "none", SetSession (текст, 'Прикажи коментаре'); }
      }, 
    });  

    Template.PrikažiMe.helpers({   
      текст: function(){
        return Session.get(текст);
      },
    });      
};

【问题讨论】：

标签： javascript button meteor click htmltext

【解决方案1】：

您不应该从 JavaScript 更改 HTML/CSS，而是在您的模板中处理它。

这是一个未经测试的代码示例。它还依赖于包reactive-var。

<template name="t">
  <button id="b">{{#if isButtonActive}}Active!{{else}}Not active{{/if}}</button>
</template>

Template.t.onCreated(function(){
  this.isButtonActiveReactiveVar = new ReactiveVar(false)
})

Template.t.helpers({
  'isButtonActive': function(){
    return Template.instance().isButtonActiveReactiveVar.get()
  }
})

Template.t.events({
  'click #b': function(event, template){
    template.isButtonActiveReactiveVar.set(!template.isButtonActiveReactiveVar.get())
  }
})

【讨论】：

我有错误，模板未定义。没有机会这样做..没有办法像我上面开始的那样做吗？
@Peppe 解决方案更好，遵循“流星方式”。检查您是否将“t”模板名称示例替换为“PrikažiMe”。建议，避免变量名出现奇怪的重音...
@НиколаДашић，是的，您可以按照自己的方式进行操作，但是我根本不会使用 Meteor，而只会使用普通的 HTML 和 JS。
我只需要提示，如何在单击按钮时更改文本？我可以在活动内部做吗？

【解决方案2】：

所以，我发现了问题所在。希望这对将来的人有所帮助。看代码：

模板：

<button class="PrikažiKomentar"> {{#if текст}}Сакриј коментаре {{else}} Прикажи коментаре {{/if}} </button>

</template>

JS：

if (Meteor.isClient) {

    Template.PrikažiMe.onCreated(function PrikažiMeOnCreated() {
        this.текст = new ReactiveVar(false);
    }); 

    Template.PrikažiMe.events({
      'click .PrikažiKomentar': function(event, template){
        if (document.getElementById(this._id).style.display == "none") 
            { document.getElementById(this._id).style.display = "inline-flex", template.текст.set( true );}
        else {document.getElementById(this._id).style.display = "none", template.текст.set( false );}
      }, 
    });  

   Template.PrikažiMe.helpers({   
       текст: function() {
              return Template.instance().текст.get();
       },
    });      
};

【讨论】：