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

Question

I have a simple meteor app with a body template that has a simple form to create a post with title , text , and _id . 我有一个带有正文模板的简单流星应用程序，该模板具有一个简单的表单，可以创建带有title ， text和_id的帖子。 When I create a post, it renders in the post template which includes an update button. 创建帖子时，它会在包含更新按钮的帖子模板中呈现。 On the javascript side (client), I have a method like so: 在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
}

Basically I want something with which I can access the body template's instance and set it's title , text , and _id values. 基本上，我想要一些可以用来访问主体模板实例并设置其title ， text和_id值的东西。 I've tried Template.instance() , but that doesn't seem to include these variables. 我已经尝试了Template.instance() ，但是似乎没有包含这些变量。

How would I go about doing this? 我将如何去做呢？ The user should be able to click update, and then edit the info in the same form they use to create posts (I'm using upsert to update instead of create posts when they already exist). 用户应该能够单击更新，然后以用于创建帖子的相同形式编辑信息（我使用upsert进行更新，而不是在已有帖子时创建帖子）。

html file with templates: 带有模板的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>

logic for update function: 更新功能的逻辑：

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;

 }
});

obviously there are other functions too... 显然还有其他功能...

Answer 1

First set up a reactiveVar ( please read the reactiveVar docs ) to hold the form data when you click update. 当您单击更新时，首先设置一个reactVar（请阅读reactVar文档）以保存表单数据。

(Also, move the body click .update event to post events ) （此外，将主体click .update事件移动到发布事件）

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

Now every time you click a post update button, you will be putting the data from that post into the post reactiveVar. 现在，每次单击发布更新按钮时，您会将来自该发布的数据放入post reactVar中。

Next, put the post form inside of another template called postForm : 接下来，将发布表单放在另一个名为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>

Notice the use of {{#with post}} . 注意使用{{#with post}} 。 In this example post is just a helper that will need to be created to allow access of the post reactiveVar inside of your template. 在此示例中， post只是一个助手，将需要创建该助手以允许访问模板内部的post reactVar。 Also, note the use of handlebars in each of the input values. 另外，请注意在每个输入值中使用把手。

Template.postForm.helpers({
    post: function(){
        return post.get();
    }
});

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

问题描述

1 个解决方案

解决方案1
1 2016-08-17 14:33:10

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

问题描述

1 个解决方案

解决方案1 1 2016-08-17 14:33:10

解决方案1
1 2016-08-17 14:33:10