如何讓表單出現在Meteor的點擊事件中？

Question

點擊一個button我需要讓一個form看起來有助於在單頁上添加內容。我做了一個form和一個button。

<template name="addPost"> 
     <button class="clickable">Add your dream</button> 
     <form> 
      {{#if clickable}} 
      <input type="text" name="title" class="title" placeholder="Title" required> 
      <textarea class="story" placeholder="What did you dream about tonight?"></textarea> 
      <input type="text" name="author" class="author" placeholder="Pen name" required> 
      <input type="submit" value="Publish"> 
      {{/if}} 
     </form> 
</template> 

但我不知道如何從客戶端點擊事件回調到HTML，以使單擊按鈕後單擊窗體出現。

if (Meteor.isClient) { 
    Template.addPost.events({ 
    'click .clickable': function() { 
     return; 
    }); 
}; 

Answer 1

您可以使用模板事件/幫助器來完成此操作。

//Setting the session to false by default 
Session.setDefault('visible',false) 

的js

Template.addPost.events({ 
    'click .clickable':function(){ 
    Session.set("visible",true) 
    } 
}) 

Template.addPost.helpers({ 
    showForm:function(){ 
    var show = Session.get('visible'); 
    if(show === true){ 
    return true; 
    }else{ 
    return false; 
    } 
    } 
}) 

//to set the session to false on refresh. 
Template.addPost.destroyed = function(){ 
    Session.set('visible',false) 
} 

現在

在HTML

<template name="addPost"> 
    {{#if showForm}} 
     <input type="text" name="title" class="title" placeholder="Title" required> 
     <textarea class="story" placeholder="What did you dream about tonight?"></textarea> 
     <input type="text" name="author" class="author" placeholder="Pen name" required> 
     <input type="submit" value="Publish"> 
    {{else}} 
     <span> Please click the button to show the form</span> 
    {{/if}} 
</template>