我正在制作一个有投票权的论坛。
如果我进入一个帖子,它看起来像这样。
- 邮报
- 回答
- 回答
- 回答
- 等等...
我有一些方法可以在单击赞成票和反对票、取消反对票和取消投票时调用 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
。
答案加载如下
在主题内(帖子)
{{#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
,所以您最终会同时呈现多个。
第一步
将您的 upvote
和 downvote
id 替换为类。
第二步
您可以使用 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/