CODEWITHSUNDEEP
javascriptjquerymongodbmeteormeteor-blaze
Sang Yoo Kim
Sang Yoo Kim

Reputation: 365

Meteor - Accessing DOM elements from another template events handler

Good Afternoon everyone.

I'm trying to color the comment item when I go to the page with the comment included through notifications. - Like fb or stack overflow.

I have everything working except the part that I mentioned above.

Notification Events

Template.notification.events({
    'click a':function() {
        var commentTemplate = this.commentId;
        console.log(commentTemplate);    //Target commentId returns successfully

        //Code here needed 
        //to color comment when page moves to
        //coresponding page.
   }

Template.commentList

//HTML
{{#each comments}}
    {{> commentItem}}
{{/each}}

//JS
comments: function(){
    return Comments.find({postId:this._id});
}

I've also tried grabbing the corresponding commentItem's id through console.log using this._id.

So What I would like to know is,

is there a way to link this.commentId from notifications and access <template name = "commentItem"> with corresponding _id. And then manipulate it's element / dom by using things such as .addClass.

Please nudge me in the right direction!

Upvotes: 0

Views: 638

Answers (1)

Carson Moore
Carson Moore

Reputation: 1287

If I understand you correctly, when you click a link in the notifications template, you want to take the user to the commentList page and then manipulate the CSS of the referred-to comment? There are probably a couple of ways to do this.

The first step is going to be to make sure that you have a way to select that particular DOM element once the page loads. For that, in your commentItem template, you might do something like this:

<template name='commentItem'>
  <div class='commentItem' id='comment-{{_id}}'>
    ....
  </div>
</template>

If you're using iron:router, a quick and easy way (but not a particularly robust way) to do this would be to manually redirect to the commentList page, then perform your manipulation as part of the event handler once the page has rendered:

Template.notification.events({
  'click a':function(event) {
    event.preventDefault(); // don't let this take you anywhere
    var commentTemplate = this.commentId;
    Router.go($(event.currentTarget).attr('href'));
    setTimeout(function() { 
      $('#comment-' + commentTemplate).addClass('whatever-class-you-want');
    }, 500); // need to wait for the page to render first -- this is probably not a robust method
  }
});

A more robust option, which has the added benefit of persisting on page refresh, might be to add an optional referrer parameter to the URL (i.e., have the link be something like <a href="{{pathFor commentsPage query='referrer=[comment _id]'}}">...</a>, where [comment _id] is replaced by the _id of the comment in question), then in your commentList template, once your page has rendered, you can see if there's a referrer, and if there is, change the CSS:

Template.commentList.rendered = function() { 
  var referrer = Router.current().params.query.referrer;
  if (referrer) { 
    $('#comment-' + referrer).addClass('whatever-class-you-want');
  }
}

Upvotes: 1

Related Questions