我按照 YouTube 教程编写了一个分页,除了再次向后退时之外,它工作得很好。它只有 2 个按钮,
previous
和 next
,当单击下一个按钮时它可以正常工作,但上一个按钮只能后退一次。
假设我的集合中有 20 条记录,分页一次显示 5 条,下一个按钮可以转到第四页的末尾,但上一个按钮不会向后退一步。怎样才能有分页体验?只要用户单击,上一个按钮就会导航到最后一页。
分页按钮的事件:
Template.myviews.events({
'click .previous': function () {
if (Session.get('skip') > 5 ) {
Session.set('skip', Session.get('skip') - 5 );
}
},
'click .next': function () {
Session.set('skip', Session.get('skip') + 5 );
}
});
出版:
Meteor.publish('userSchools', function (skipCount) {
check(skipCount, Number);
user = Meteor.users.findOne({ _id: this.userId });
if(user) {
if(user.emails[0].verified) {
return SchoolDb.find({userId: Meteor.userId()}, {limit: 5, skip: skipCount});
} else {
throw new Meteor.Error('Not authorized');
return false;
}
}
});
订阅:
Session.setDefault('skip', 0);
Tracker.autorun(function () {
Meteor.subscribe('userSchools', Session.get('skip'));
});
火焰分页按钮:
<ul class="pager">
<li class="previous"><a href="#">Previous</a> </li>
<li class="next"><a href="#">Next</a> </li>
</ul>
模板助手:
RenderSchool: function () {
if(Meteor.userId()) {
if(Meteor.user().emails[0].verified) {
return SchoolDb.find({userId: Meteor.userId()}).fetch().reverse();
} else {
FlowRouter.go('/');
Bert.alert('Please verify your account to proceed', 'success', 'growl-top-right');
}
}
}
您总共有 6 个文档,每页 2 个文档,总共 3 页。
您的
if
按钮单击处理程序中的 previous
状况会阻止您转到第一页:
if (Session.get('skip') > 2 /* testing */ ) {
...
}
对于第二页
skip
将等于 2
,下次单击时此条件将是 false
,防止返回。
当您在第三页时 - 您只能继续第二页,给人一种按钮只能使用一次的印象。
应该是这样的:
if (Session.get('skip') > 0 ) {
...
}