CODEWITHSUNDEEP
javascriptmongodbmeteor
Simon
Simon

Reputation: 10150

Meteor: displaying document specific information

In my navigation bar I call find() on a collection to list all documents available.

A document might look something like this:

{id: 1, title: title, info: "info about this doc"}

Next to the nav bar I have my main content area.

The nav bar displays the title of all found documents. But I want each to be a link. When a user clicks on one of the document titles, I want the main content area to show the info value of only that document

My question is how do you tell the info area which document title has been clicked, so it knows which info to show?

I thought about using Sessions, so each title click calls a function that does something like: 

Session.set("curTitle", id);

and then when displaying the info, I could just use Session.get() to retrieve the id of the document I need to show

Is this the correct way to handle this type of situation with Meteor? Or is there a better way to achieve this?

Upvotes: 0

Views: 51

Answers (1)

Luna
Luna

Reputation: 1178

I highly recommend you to use iron:router

In case you want to know how to do it, here is a full example:

//router.js on the client folder
Router.configure({
    //your main layout template
    layoutTemplate:'yourTemplateName'
});

We're creating a route that loads the main content when you click the title

Router.route('/pathyouwant/:_id', function () {
    //we specify what we want to render and where which is also connected to our html
    this.render('yourTemplateWithMainData', {
        data: function () {
            return CollectionName.findOne({_id: this.params._id});
        },
        //this is connected to your html. see the next code.
        to: 'load-it-here'
    })
},{
    name: 'pathName' //we name the path to use it inside the links
});


<template name="yourTemplateName">
    //not going to add all the html elements but only important parts
    //lets say this is how you show only titles:
    {{#each somethings}}
        {{title}}
    {{/each}}


    <div class="some-div">
        //we specify where the content will load in our html here. 
        {{> yield 'load-it-here'}}
    </div>
</template>

You just need to add an a tag around the title now. We already named our path in router.js as pathName in our router

<a href="{{pathFor route='pathName'}}">{{title}}</a>

EDIT: The reason I wrote the routing example with {{> yield 'specific-place'}} is you can use them in any template. For example:

<template name="mainTemplate">
    {{>yield}}
</template>

Your route for home:

Router.route('/', function () {
    this.render('home'); //every route without a specified 'to:' will load to {{> yield}} automatically
});

So when you go to '/' it renders home template to {{> yield}}. Lets say you don't want to load the content to {{> yield}} but you want to load it inside the home template which you already rendered to {{>yield}}

<template name="home">
    //other elements, nav bar etc.
    <div class="left-panel">
        {{#each somethings}}
           <a href="{{pathFor route='pathName'}}">{{title}}</a>
        {{/each}}
    </div>

    <div class="content-area">
        {{> yield 'load-it-here'}}
    </div>

</template>

Let me know if there is something you don't understand. Cheers.

Upvotes: 1

Related Questions