html - 返回 html 的 meteor 模板助手没有反应

Question

所以，我在尝试使用模板助手时遇到了问题。

我正在使用帮助器根据数据库条目返回一个类。加载模板时它确实可以正常工作，但是当数据库条目更改时(例如，单击按钮并且事件调用更新方法)，似乎不会重新运行帮助程序。

我希望帮助程序在点击事件调用更新方法时重新运行。

有什么想法吗？

模板:

<template name="modalPost">
  <div id="modalPost" class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">

        [...]

    <div class="modal-body">
      <div class="row">
        <div class="col-sm-5">
          <div class="col-xs-12">
            <a href="#" class="upvote btn btn-default {{upvotedClass}}">⬆</a>
            <a href="#" class="downvote btn btn-default {{downvotedClass}}">⇩</a>
          </div>
        </div>
      </div>
    </div>

        [...]

    </div><!-- modal-content -->
  </div><!-- modal-dialog -->
</div><!-- id: bugModal -->

助手:

Template.modalPost.helpers({

 'upvotedClass': function() {
   var userId = Meteor.userId();
   if (userId && !_.include(this.upvoters, userId)) {
     return 'upvotable';
   } else if (userId && _.include(this.upvoters, userId)) {
     return 'btn-success disabled';
   } else {
     return 'disabled';
   }
 },

 'downvotedClass': function() {
   var userId = Meteor.userId();
   if (userId && !_.include(this.downvoters, userId)) {
     return 'downvotable';
   } else if (userId && _.include(this.downvoters, userId))  {
     return 'btn-danger disabled';
   } else {
     return 'disabled';
   }
 }

});

事件:

Template.modalPost.events({

 'click .upvotable': function(e, template) {
   e.preventDefault();
   Meteor.call('upvotePost', this._id);
 },

 'click .downvotable': function(e) {
   e.preventDefault();
   Meteor.call('downvotePost', this._id);
 }

});

//可能与问题无关，但为了方便 :-)

方法:

Meteor.methods({
 'upvotePost': function(post_id){
   var post = Posts.findOne(post_id);
   if (!post) {
     console.log('error, post not found');
   } else if (_.include(post.upvoters, this.userId)) {  // if already upvoted
     console.log('error, already upvoted this post');
   } else if (_.include(post.downvoters, this.userId)) {  // if downvoted before
     Posts.update(post._id, {
       $addToSet: {upvoters: this.userId},
       $pull: {downvoters: this.userId},
       $inc: {votes: 2}
     });
   } else {         // if vote for first time
     Posts.update(post._id, {
       $addToSet: {upvoters: this.userId},
       $pull: {downvoters: this.userId},
       $inc: {votes: 1}
     });
   }
 },

 'downvotePost': function(post_id){
   var post = Posts.findOne(post_id);
   if (!post) {
     console.log('error, post not found');
   } else if (_.include(post.downvoters, this.userId)) { // if already downvoted
     console.log('error, already downvoted this post');
   } else if (_.include(post.upvoters, this.userId)) { // if upvoted before
     Posts.update(post._id, {
       $addToSet: {downvoters: this.userId},
       $pull: {upvoters: this.userId},
       $inc: {votes: -2}
     });
   } else {         // if vote for first time
     Posts.update(post._id, {
       $addToSet: {downvoters: this.userId},
       $inc: {votes: -1}
     });
   }
 }
});

Answer 1

我认为您在助手中的响应式(Reactive)数据源始终相同。这就是它不会重新运行的原因。您的 react 数据源是 Meteor.userId() 在这里。您需要其他查询，这些查询将随着时间的推移返回不同的结果。或者您可以使用 Session 或 ReactiveVar。

在这里您可以尝试使用响应式(Reactive) Template.currentData() ，也许它会有所帮助。但我没有测试过。因此，例如在助手中:

'upvotedClass': function() {
    var currData = Template.currentData();
    var userId = Meteor.userId();
    if (userId && !_.include(currData.upvoters, userId)) {
        return 'upvotable';
    } else if (userId && _.include(currData.upvoters, userId)) {
        return 'btn-success disabled';
    } else {
        return 'disabled';
    }
}