javascript - Meteor - 从另一个模板事件处理程序访问 DOM 元素

Question

大家下午好。

当我进入包含通过通知的评论的页面时，我尝试为评论项着色。 - 就像 fb 或堆栈溢出一样。

除了我上面提到的部分之外，我的一切都正常。

通知事件

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.
   }        

模板.commentList

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

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

我还尝试通过 console.log 获取相应的 commentItem 的 id使用this._id .

所以我想知道的是，

有没有办法链接this.commentId来自通知和访问 <template name = "commentItem">对应_id 。然后操纵它的element/dom通过使用诸如.addClass之类的东西.

请把我推向正确的方向!

Answer 1

如果我理解正确的话，当您单击通知模板中的链接时，您希望将用户带到commentList页面，然后操作所引用评论的CSS吗？可能有几种方法可以做到这一点。

第一步是确保页面加载后您可以选择特定的 DOM 元素。为此，在您的 commentItem 模板中，您可以执行以下操作:

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

如果您使用iron:router ，一种快速而简单的方法(但不是特别可靠的方法)是手动重定向到 commentList 页面，然后在页面呈现后将操作作为事件处理程序的一部分执行:

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
  }
});   

一个更强大的选项可能是添加一个可选的referrer，它具有持续页面刷新的额外好处。 URL 参数(即，让链接类似于 <a href="{{pathFor commentsPage query='referrer=[comment _id]'}}">...</a> ，其中 [comment _id] 替换为相关评论的 _id)，然后在您的 commentList 模板中，页面呈现后，您可以看到是否有一个引荐来源网址，如果有，请更改 CSS:

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