Push data between two meteor templates

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. 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:

'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. I've tried Template.instance(), but that doesn't seem to include these variables.

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).

html file with templates:

<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...

You'd want to use the event's template parameter instead of Template.instance(). Check out this post for more: stackoverflow.com/a/35657873/1689286. — Jeremiah
yea, that's great for accessing THAT template's params, but I need to access another template's params. The template is defined as a totally different block of html. — Silvertail
Are these templates located in the same file or different? Can you post your templates (the pertinent parts)? — Jeremiah

Jeremiah Jeremiah · Accepted Answer · 2016-08-17T14:33:10

First set up a reactiveVar (please read the reactiveVar docs) to hold the form data when you click update.

(Also, move the body click .update event to post events )

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.

Next, put the post form inside of another template called 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}}. 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. Also, note the use of handlebars in each of the input values.

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

Push data between two meteor templates

1 Answers