Search code examples
meteormeteor-helper

How to pass the result of an event to a template on meteor


I am new to meteor and i am wondering how am i able to pass the result of a query that is the result of a click event of a template to another template that will show up after click event.

Template.projectList.events({

    "click .list-group-item": function(){
        //Session.set("projectSelected", true);
        Session.set("projectSelected", this._id)
    }
});

<template name="projectDetail">
<div class="project">
    <h4 class="project-title">
        <span>{{name}}</span>
        <i class="glyphicon glyphicon-trash pull-right del"></i>
        <i class="glyphicon glyphicon-plus pull-right add"></i>
    </h4>
    <div class="clearfix"></div>
    <div class="project-description">
        <label>Project description:</label>
        <p>
        {{remarks}}
        </p>
    </div>
</div>
</template>

I made some revision and did something similar to that 1st suggestion. But i did not put the entire query result to the session. Instead i place the selected id and made the helper query the details of the project. But by doing so, still to no avail of the desired result.

Template.projectDetail.helpers({

    detail: function(){

        if(Session.get("projectSelected")){
            var proj = Project.find({_id: Session.get("projectSelected")}).fetch();
        }

        return proj;
    }

});

Solution

  • You should use helpers for that. For example, assuming project is the result you want to pass to projectDetail template:

    Template.projectList.events({    
        "click .list-group-item": function(){
            Session.set("projectSelected", true);    
            var project = Project.find({_id: this._id}).fetch();
            // Store project in Session
            Session.set("aProject", project);
        }
    });
    Template.projectDetail.helpers({
        project: function () {
            // Get the project back from Session
            var project = Session.get("aProject");
            return project;
        }
    });
    

    So now, in your projectDetail template, {{project}} will depend on the result of the query from the click event.