How to send data from one template to other in Meteor
Posted By : Parveen Kumar Yadav | 14-Jul-2016
Sometimes we have requirement for using result of one template into other template in Meteor and this is very common thing to use.
So in this blog I am going to explain how you can use one template data in other template.
Suppose you have a template name allInventory on which click event you get some data like id and you will go to some other template named as productDetail with that data and now you want to show or render that data on productDetail html template.
lets take an situation like:-
allInventory.js
Template.allInventory.rendered = function() {
Template.allInventory.events({
"click .btn":function (e){
data = $(e.target).attr('data');
Router.go('productDetail', {data: $(e.target).attr('data')}, {query: 'q=s', hash: 'hashFrag'});
console.log(data);
}
})
productDetails.js
Template.productDetail.rendered = function () {
Template.productDetail.helpers({
productDetails: function() {
return data;
}
});
allInvenrtory.html
I just simply want to share allInventory template data with productsDetails template.
So here i need to use allInventory.js template data in productDetails.js template so to achieve this one approach is using Session package
install that via:-
meteor add session
But there is one problem with this session this will not persists your values as you refresh the page so for that solution you can use:-
u2622:persistent-session
To add simple write:-
meteor add u2622:persistent-session
now there are mainly four methods of this you can use according to your need and if you want your data will be persist after refresh as well than use
Session.setPersistent(key, value)
So we can set our data as get from allInventory and get it in productDetailspage like:-
allinventory.js
Template.allInventory.rendered = function() {
Template.allInventory.events({
"click .btn":function (e){
data = $(e.target).attr('data');
Session.setPersistent("data", data)
Router.go('productDetail', {data: $(e.target).attr('data')}, {query: 'q=s', hash: 'hashFrag'});
console.log(data);
}
})
productsDetails.js
Template.productDetail.rendered = function () {
Template.productDetail.helpers({
productDetails: function() {
var data = Session.get(data);
return data;
}
});
So in this way you can share data between multiple templates.
Here is my stackoverflow link for same question:-
http://stackoverflow.com/questions/37937964/how-to-send-some-data-of-one-template-to-another-template-meteor
Thanks!
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Parveen Kumar Yadav
Parveen is an experienced Java Developer working on Java, J2EE, Spring, Hibernate, Grails ,Node.js,Meteor,Blaze, Neo4j, MongoDB, Wowza Streaming Server,FFMPEG,Video transcoding,Amazon web services, AngularJs, javascript. He likes to learn new technologies