在两个流星模板之间推送数据

Push data between two meteor templates

本文关键字：之间 数据 流星 两个      更新时间：2023-09-26

我有一个简单的流星应用程序与身体模板，有一个简单的形式来创建与title, text和_id的帖子。当我创建一个帖子时，它在包含更新按钮的帖子模板中呈现。在javascript端(客户端)，我有这样一个方法:

'click .update'(event){
    event.preventDefault();
    const target = event.target;
    post = Post.find({_id: this._id}).fetch();
    //send post's data to the body template so it can be rendered and updated by the user
}

基本上我想要的东西，我可以访问主体模板的实例，并设置它的title, text和_id值。我试过Template.instance()，但这似乎不包括这些变量。

我该怎么做呢?用户应该能够点击更新，然后以创建帖子的相同形式编辑信息(我使用upsert来更新而不是在已经存在的情况下创建帖子)。

html文件与模板:

<body>
  <div class="container">
    <header>
      <h1>Post List</h1>
      <form class="new-post">
        <input type="text" name="title" placeholder="Post Title" />
        <input type="text" name="text" placeholder="Post Body" />
        <input hidden name="_id" />
        <button value="Create">Create</button>
      </form>
    </header>
    <ul>
      {{#each posts}}
        {{> post}}
      {{/each}}
    </ul>
  </div>
</body>
<template name="post">
  <li>
    <ul>
      <li>{{_id}}</li>
      <li>{{title}}</li>
      <li>{{text}}</li>
      <li><button class="update" value="Update {{id}}" id='{{id}}'>Update</button></li>
      <li><button class="delete" value="Delete {{id}}" id='{{id}}'>Delete</button></li>
    </ul>
  </li>
</template>

更新函数逻辑:

Template.body.events({
 'click .update'(event){
   event.preventDefault();
   console.log("post id number: " + this._id);
   const target =Template.instance();//I need to get the instance of the body template here (where posts are created)
   posts = Posts.find({_id: this._id}).fetch();
   target.title.value=posts[0].title;
   target.text.value=posts[0].text;
   target._id.value=posts[0]._id;
 }
});

显然还有其他功能…

首先设置一个reactiveVar(请阅读reactiveVar文档)，以便在单击更新时保存表单数据。

(另外，移动body click .update event以发布事件)

const post = new ReactiveVar({}); // Set it at the top of your js.
Template.body.events({
});
Template.post.events({
  'click .update'(event){
    event.preventDefault();
    post = Posts.find({_id: this._id}).fetch();
    post.set(post);
  }
});

现在每次你点击一个帖子更新按钮，你将把数据从该帖子到post reactiveVar。

接下来，将post表单放入另一个名为postForm:

的模板中
<body>
  <div class="container">
    <header>
      <h1>Post List</h1>
      {{> postForm}}
    </header>
    <ul>
      {{#each posts}}
        {{> post}}
      {{/each}}
    </ul>
  </div>
</body>
<template name="postForm">
  {{#with post}}
    <form class="new-post">
      <input type="text" name="title" placeholder="Post Title" value="{{title}}">
      <input type="text" name="text" placeholder="Post Body" value="{{text}}">
      <input hidden name="_id" value="{{_id}}">
      <button value="Create">Save</button>
    </form>
  {{/with}}
</template>
<template name="post">
  <li>
    <ul>
      <li>{{_id}}</li>
      <li>{{title}}</li>
      <li>{{text}}</li>
      <li><button class="update" value="Update {{id}}" id='{{id}}'>Update</button></li>
      <li><button class="delete" value="Delete {{id}}" id='{{id}}'>Delete</button></li>
    </ul>
  </li>
</template>

注意{{#with post}}的使用。在这个例子中，post只是一个助手，需要创建它来允许访问模板中的post reactiveVar。另外，请注意在每个输入值中使用了车把。

Template.postForm.helpers({
    post: function(){
        return post.get();
    }
});
相关文章：