CODEWITHSUNDEEP
databasemeteorflickr
songololo
songololo

Reputation: 4964

Meteor - how to link html element to database entry on click event?

I'm trying to figure out how to link an html picture element back to the database entry that was originally used to generate the picture link.

I am using Meteor: - I have a database that contains photosets data from Flickr API - In the HTML, I have a handlebar "each" script that iterates through each photoset in the database and then uses this info to generate the html for the photoset cover picture links. - When the html renders, the photoset cover pictures are downloaded from Flickr and displayed to the screen.

I would like to be able to click on the photoset cover picture and then automatically generate the links to the pictures in the photoset. But I don't understand how to dynamically link the html picture elements back to their respective database entries that were originally used for generating the picture links. I need to be able to find the original database entries so that I can load the info needed for generation of subsequent links.

As a newb to all of this I'm not really sure where to start looking or what to try. I've wondered about creating an object with custom key pairs to 'memorise' the identity of each photoset picture. Is this the way to go, or is there an easier way that I am overlooking?

Thanks.

Upvotes: 1

Views: 920

Answers (1)

Tarang
Tarang

Reputation: 75965

Say you have your pictures being put out this way:

Template.mytemplate.helpers({
    picture:function() {
        return pictures.find()
    }
});

You can also do this instead, which is pretty much the same thing:

Template.mytemplate.picture = function() {
    return pictures.find();
}

With the html

<template name="pictures">
    {{#each picture}}
        <img src="{{src}}" class="pictureselector"/>
    {{/each}}
</template>

You can use events which can get data from that particular picture document/record

Template.mytemplate.events({
    'click .pictureselector':function(event,template) {
        console.log(this._id); //Should give you the `_id` of the picture that was clicked

    }
});

this is the data context of the element that was clicked & generate the link you want using the data inside this.

Be careful if you use something with a callback inside the click like Meteor.call, you will have to relay the message down via var self = this otherwise the context of this would become the one of Meteor.call

Upvotes: 3

Related Questions