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>

如何在Meteor中的点击事件中显示表单？

1 个答案: