javascript - 使用 JS 更改 Meteor 中的按钮文本

Question

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

模板:

<template name="PrikažiMe">

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

</template>

JS

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(текст);
      },
    });      
};

Answer 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())
  }
})