Meteor

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

所以我想知道的是，

有没有办法从通知中 link this.commentId 并使用相应的 _id 访问 <template name = "commentItem">。然后通过使用诸如 .addClass.

之类的东西来操纵它的 element / dom

请向正确的方向轻推我！

Answer 1

如果我没理解错的话，当你点击通知模板中的 link 时，你想将用户带到 commentList 页面，然后操作所引用评论的 CSS ？可能有几种方法可以做到这一点。

第一步是确保您有办法在页面加载后 select 该特定 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 参数（即，让 link类似于 <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');
  }
}

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

Meteor - Accessing DOM elements from another template events handler

javascript

jquery

mongodb

meteor-blaze