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

Template.commentList

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

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

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

所以我想知道的是，

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

请把我推向正确的方向！

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

一个更强大的选项可能是在 URL 中添加一个可选的 referrer 参数（即，让链接类似于 <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');
  }
}