我目前正在以投票方式建立一个论坛。
如果我发帖,它看起来像这样。
邮政
回答
回答
回答
等等...
当单击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
,则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
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
用类替换您的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。关于javascript - Template.foo.rendered适用于所有'foo',我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29105062/