Изменить текст кнопки в Meteor с помощью JS

Question

Моя кнопка нажимает кнопку show и скрывает div, содержащий раздел комментариев. Теперь я хочу заставить его изменить текст по щелчку. Таким образом, вы нажимаете один раз, и вы можете видеть комментарии, но вместо «Показывать комментарии» текст hes теперь должен быть «Скрыть комментарии». Я попробовал несколько решений, которые я нашел в Интернете, и несколько решений, которые были для меня логичными, но они не работают. Я тоже пробовал 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

Итак, я узнал, что была проблема. Надеюсь, это поможет кому-то в будущем. Посмотрите на код:

Шаблон:

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

Answer 2

Вы не должны изменять HTML/CSS с JavaScript, вместо того, чтобы справиться с этим в шаблоне.

Вот пример с непроверенным кодом. Он также полагается на пакет 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()) 
    } 
})