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...
1 answers
solution1
1 2016-08-17 14: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();
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.