Template.foo.renderd适用于所有'foo'

我目前正在制作一个有投票的论坛。

如果我进入一个帖子，它看起来像这样。

• 《华盛顿邮报》
  • 答
  • 答
  • 答
  • 等等...

我有方法在点击赞成和反对、未反对和不投票时调用流星方法。它将用户插入到反对者，赞成者，inc或inc -1票等。

然后我有以下代码来禁用相反的按钮（如果单击）。

例如，单击"赞成票"时，将禁用"反对票"。单击"反对票

"时，将禁用"赞成票"。

模板.答案项.渲染

Template.answerItem.rendered = function() {
    if( $('#upvote').hasClass('unvote') ) {
        $('#downvote').attr('disabled', 'disabled');
    }
    if( $('#downvote').hasClass('undownvote')) {
        $('#upvote').attr('disabled', 'disabled');
    }
}

问题是，如果我在一个线程中有多个答案，这将应用于所有答案项，而不仅仅是已应用于的一个答案项。

例如，如果我在 answer1 中单击upvote，downvote将在answer1和answer2中禁用。

答案加载如下

在线程（帖子）内

{{#each answers}}
    {{> answerItem}}
{{/each}}

我将如何使我拥有的代码仅适用于（一个）answerItem，以便它为每个answerItem单独运行？

编辑1

更新信息（代码）

Template.answerItem 的 HTML 投票片段

<div class = "voting-container">
    <button id="upvote" class="upvote {{upvotedClass}}">
        <span class="glyphicon glyphicon-triangle-top"></span>
    </button>
    <div class = "voteCount-container"> 
        <span>{{votes}}</span>  <!--To retrieve votecount from answers collection-->
    </div>
   <button id="downvote" class="downvote {{downvotedClass}}">
        <span class="glyphicon glyphicon-triangle-bottom"></span>
    </button>               
</div>

模板.答案项.渲染

Template.answerItem.rendered = function() {
    var $downvote = this.$('.downvote');
    var $upvote = this.$('.upvote');
    if($upvote.hasClass('unvote'))
        $downvote.attr('disabled', 'disabled');
    if($downvote.hasClass('undownvote'))
        $upvote.attr('disabled', 'disabled');
}

模板.答案项.帮助程序

Template.answerItem.helpers({
    upvotedClass: function() {
        var userId = Meteor.userId();
        if (userId && !_.include(this.upvoters, userId)) {
            return 'upvotable';
        }  else {
            return 'unvote';
        }    
    },
    downvotedClass: function() {
        var userId = Meteor.userId();
        if (userId && !_.include(this.downvoters, userId)) {
            return 'downvotable';
        } else {
            return 'undownvote';
        }
    }
});

模板.答案项目.事件

Template.answerItem.events({

    'click .upvotable': function(e) {
    e.preventDefault();
    $('.downvotable').prop('disabled', true);
    Meteor.call('upvoteAnswer', this._id);
    },
    'click .unvote': function(e) {
    e.preventDefault();
    $('.downvotable').prop('disabled', false);
    Meteor.call('unvoteAnswer', this._id);
    },
    'click .downvotable': function(e) {
    e.preventDefault();
    $('.upvotable').prop('disabled', true);
    Meteor.call('downvoteAnswer', this._id);
    },
    'click .undownvote': function(e) {
    e.preventDefault();
    $('.upvotable').prop('disabled', false);
    Meteor.call('undownvoteAnswer', this._id);
    }
})

Template.answerItem.rendered = function() {
  var $downvote = this.$('.downvote');
  var $upvote = this.$('.upvote');
  if($upvote.hasClass('unvote'))
    $downvote.prop('disabled', true);
  if($downvote.hasClass('undownvote'))
    $upvote.prop('disabled', true);
}

Template.answerItem.rendered = function() {
    if( $('.upvote').hasClass('unvote') ) {
        $(this).siblings('.downvote').attr('disabled', 'disabled');
    }
    if( $('.downvote').hasClass('undownvote')) {
        $(this).siblings('.upvote').attr('disabled', 'disabled');
    }
}