Meteor with JSのボタンのテキストを変更

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

だから、私は問題が何であったかが分かりました。これが将来誰かを助けてくれることを願っています。コードを見てください：

テンプレート：

<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

あなたのテンプレートでこれを扱う代わりに、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()) 
    } 
})