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

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

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

2 个答案: