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

Question

我正在做一个有投票权的论坛

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

Post
- 回答
- 回答
- 回答
- 等等...

我有一些方法可以在单击赞成票和反对票、反对票和取消票时调用 meteor.methods。它将用户插入 downvoters、upvoters、inc 或 inc -1 票等。

然后我有以下代码可以在单击时禁用相反的按钮。

例如，当点击赞成票时，反对票被禁用。单击反对票时，禁止投票。

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。

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

答案加载如下

跟帖内(post)

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

我如何才能使我的代码仅适用于（一个）answerItem，以便它对每个 answerItem 单独起作用？

EDIT1

更新信息（代码）

HTML Template.answerItem

的投票片段

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

})

Answer 1

您可以使用 this，然后使用 parent() or siblings() 获取相关的 .downvote 元素，前提是它们是，果然是兄妹。另外，将您的 ID 替换为类.

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

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

Answer 2

HTML 要求您不要在页面上重复相同的id。因为每个 answerItem 都有一个 #upvote，你最终会同时渲染多个。

第 1 步

将您的 upvote 和 downvote 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。

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

Template.foo.rendered applying to all 'foo'

javascript

css

css-selectors

meteor

EDIT1

更新信息（代码）

第 1 步

第 2 步