Passing data from one template to another (one page to another)


#1

Hello, im a beginner in meteor and i have a problem to pass data from a page to another.

I have in my main page a list of item that take data from a collection :

<template name="hello">
   <section id="legumesdumois">
      {{#each legumes}}
             <article class="h-card" id="legumes">
                 <div class="summary">
                <a href="{{pathFor 'fiche'}}">
                <img src="{{img}}" alt="" class="u-photo">
                <p>{{nom}}</p>
                </a>
                </div>
              </article>
      {{/each}}
</section>
</template> 

When i click on a item i want to retrieve the _id of the clicked element so i can use it in another template (on another page called “fiche”). i’m able to pass the _id of my item with iron router like that :

Router.map(function(){
this.route('fiche',  { path: '/fiche/:_id'}); 
});

After this when i click on an element i have this link in my navigator :

http://localhost:3000/fiche/gkHgnR36Q3e35TE8e

But then i don’t know how to retrieve this information in a new template, im not sure i have been very clear but if someone can provide me a link for a tutorial about that or if someone experienced the same problem thanks by advance for helping.

Yoann


#2

To pass data from one template to the next you would do something like this

<template name="hello">
   <section id="legumesdumois">
      {{#each legumes}}
             {{> legumes legume=this}}
      {{/each}}
</section>
</template>

<template name="legumes">
	{{#with legumes}}
		<article class="h-card">
		 <div class="summary">
			<a href="{{pathFor 'fiche'}}">
				<img src="{{img}}" alt="" class="u-photo">
				<p>{{nom}}</p>
			</a>
		</div>
		</article>
	{{/with}}
</template>

When you click on the link you are changing routes completely. With this being said you will have to resubscribe to the specific data you are trying to get here is an example

Router.route( 'fiche/:_id', {
    name: 'view.fiche',
    template: 'fiche'
  });

Template.fiche.onRendered(function () {
	var instance = this;
	//Auto run will run when ever a reactive varable changes in this case its Router.current();
	instance.autorun(function () {
		instance.subscribe('publicationName', Router.current().params._id);
	});
});

Template.fiche.helpers({
/**
* Return the `Fiche` that the user is trying to view
* @returns Fiche 
*/
	'fiche' : function () {
		return Fiche.findOne(Router.current().params._id);
	}
});

//On Server

Meteor.publish('publicationName', function (ficheId) {
//Make sure you check your inputs you dont want someone sending in an object like { $ne : '' } and publishing everything
	check(ficheId, String);

	return Fiche.find({ _id : ficheId });
});

#3

Thank you very much for your answer, now i understand better the concept of suscribe/publish. I’m going to try that immediately, Seems i don’t need to add a package for reactiv var after reading ur explanation.

Again thanks to have take some times for answering me, i love meteor and i want to dive into it more and more everyday !

Merci !

Yoann