我目前正在以投票方式建立一个论坛。

如果我发帖,它看起来像这样。


邮政

回答
回答
回答
等等...



当单击upvote和downvote,undownvote和unvote时,我有调用meteor.methods的方法。它将用户插入下投票者,上投票者,公司或公司-1票等。

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

例如,单击upvote时,将禁用downvote。单击向下投票时,将禁用向上投票。

Template.answerItem.rendered

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

    if( $('#downvote').hasClass('undownvote')) {
        $('#upvote').attr('disabled', 'disabled');
    }
}


问题是,如果我在一个线程中有多个答案,那么它将应用于所有的answerItems,而不仅仅是应用于它的一个answerItem。

例如,如果我单击upvote中的answer1,则downvoteanswer1中的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

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

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

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

})

最佳答案

HTML要求您不要在页面上重复相同的ID。由于每个answerItem都有一个#upvote,因此最终将同时渲染多个。

步骤1

用类替换您的upvotedownvote id。

第2步

您可以使用template.$将jQuery选择器隔离为仅当前模板中的元素。从rendered回调中,导致使用this.$,如下所示:

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


另请注意,.prop('disabled', true)显然是correct way to disable an input

关于javascript - Template.foo.rendered适用于所有'foo',我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29105062/

10-09 21:24