多个排序查询参数与Backbone.paginator
Multiple sorting query params with Backbone.paginator
我遵循了一个教程(源代码),一切都很好,但我有一个问题,排序工作,但我如何添加另一个排序选项?
例如我有这个
server_api: {
'per_page': function() { return this.perPage },
'page': function() { return this.currentPage },
'year': function() {
if (this.sortField === undefined)
return '2016';
return this.sortField;
}
},
所以我可以使用年份对我的API进行排序,但我的API也可以接受其他参数,如sort_by
。
所以我在year下面加了这个:
'sort_by': function() {
if(this.sortField === undefined)
return 'title.desc';
return this.sortField;
}
现在每次我点击"年份按钮",它都会根据年份进行排序:
sort_by=title.desc&year=2016
sort_by=title.desc&year=2011
,但如果点击sort_by
按钮,它改变的是year
的值,而不是sort_by
的例子:
sort_by=title.desc&year=popularity.asc
我的完整代码:
<script type="text/html" id="sortingTemplate">
<div class="form-group">
<div class="col-sm-3">
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle">Year <strong><span id="sortByYear">2016</span></strong> <span class="caret"></span></button>
<ul class="dropdown-menu" id="year">
<li><a href="2016">2016</a></li>
<li><a href="2015">2015</a></li>
<li><a href="2014">2014</a></li>
</ul>
</div>
</div>
<div class="col-sm-3">
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle">Sort by <strong><span id="sortBy">2016</span></strong> <span class="caret"></span></button>
<ul class="dropdown-menu" id="sort_by">
<li><a href="popularity.desc">Popularity Descending</a></li>
<li><a href="popularity.asc">Popularity Ascending</a></li>
<li><a href="vote_average.desc">Rating Descending</a></li>
<li><a href="vote_average.asc">Rating Ascending</a></li>
<li><a href="primary_release_date.desc">Release Date Descending</a></li>
<li><a href="primary_release_date.asc">Release Date Ascending</a></li>
<li><a href="title.asc">Title (A-Z)</a></li>
<li><a href="title.desc">Title (Z-A)</a></li>
</ul>
</div>
</div>
</div>
</script>
<script>
window.myapp = {};
myapp.collections = {};
myapp.models = {};
myapp.views = {};
myapp.serverURL = '{{url("/")}}';
myapp.models.Item = Backbone.Model.extend({});
myapp.collections.PaginatedCollection = Backbone.Paginator.requestPager.extend({
model: myapp.models.Item,
paginator_core: {
dataType: 'json',
url: '{{ route('api.discover.movie') }}'
},
paginator_ui: {
firstPage: 1,
currentPage: 1,
perPage: 20,
totalPages: 10
},
server_api: {
'per_page': function() { return this.perPage },
'page': function() { return this.currentPage },
'year': function() {
if(this.sortField === undefined)
return '2016';
return this.sortField;
},
'sort_by': function(){
if (this.sortField2 === undefined)
return 'title.desc';
return this.sortField2;
}
},
parse: function (response) {
$('#movies-area').spin(false);
this.totalRecords = response.total;
this.totalPages = Math.ceil(response.total / this.perPage);
return response.data;
}
});
myapp.views.ItemView = Backbone.View.extend({
tagName: 'div',
className: 'col-lg-2',
template: _.template($('#MovieItemTemplate').html()),
initialize: function() {
this.model.bind('change', this.render, this);
this.model.bind('remove', this.remove, this);
},
render : function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
myapp.views.SortedView = Backbone.View.extend({
events: {
'click #year a': 'updateYear',
'click #sort_by': 'updateSortBy'
},
template: _.template($('#sortingTemplate').html()),
initialize: function () {
this.collection.on('reset', this.render, this);
this.collection.on('sync', this.render, this);
this.$el.appendTo('#discover');
},
render: function () {
var html = this.template(this.collection.info());
this.$el.html(html);
if (this.collection.sortField == undefined){
var sortYearText = this.$el.find('#sortByYear').text();
}else{
var sortYearText = this.collection.sortField;
}
$('#sortByYear').text(sortYearText);
if (this.collection.sortField2 == undefined){
var sortByText = this.$el.find('#sortBy').text();
}else{
var sortByText = this.collection.sortField2;
}
$('#sortBy').text(sortByText);
},
updateYear: function (e) {
e.preventDefault();
var currentYear = $(e.target).attr('href');
this.collection.updateOrder(currentYear);
$('#movies-area').spin();
},
updateSortBy: function (e) {
e.preventDefault();
var currentSort = $(e.target).attr('href');
this.collection.updateOrder(currentSort);
$('#movies-area').spin();
}
});
myapp.views.PaginatedView = Backbone.View.extend({
events: {
'click button.prev': 'gotoPrev',
'click button.next': 'gotoNext',
'click a.page': 'gotoPage'
},
template: _.template($('#paginationTemplate').html()),
initialize: function () {
this.collection.on('reset', this.render, this);
this.collection.on('sync', this.render, this);
this.$el.appendTo('#pagination');
},
render: function () {
var html = this.template(this.collection.info());
this.$el.html(html);
},
gotoPrev: function (e) {
e.preventDefault();
$('#movies-area').spin();
this.collection.requestPreviousPage();
},
gotoNext: function (e) {
e.preventDefault();
$('#movies-area').spin();
this.collection.requestNextPage();
},
gotoPage: function (e) {
e.preventDefault();
$('#movies-area').spin();
var page = $(e.target).text();
this.collection.goTo(page);
}
});
myapp.views.AppView = Backbone.View.extend({
el : '#paginated-content',
initialize : function () {
$('#movies-area').spin();
var items = this.collection;
items.on('add', this.addOne, this);
items.on('all', this.render, this);
items.pager();
},
addOne : function ( item ) {
var view = new myapp.views.ItemView({model:item});
$('#paginated-content').append(view.render().el);
}
});
$(function(){
myapp.collections.paginatedItems = new myapp.collections.PaginatedCollection();
myapp.views.app = new myapp.views.AppView({collection: myapp.collections.paginatedItems});
myapp.views.pagination = new myapp.views.PaginatedView({collection:myapp.collections.paginatedItems});
myapp.views.sorting = new myapp.views.SortedView({collection:myapp.collections.paginatedItems});
});
</script>
快速修复
直接在视图的事件回调中修改值:
updateYear: function(e) {
e.preventDefault();
var currentYear = $(e.target).attr('href');
this.collection.sortField = currentYear;
$('#movies-area').spin();
},
updateSortBy: function(e) {
e.preventDefault();
var currentSort = $(e.target).attr('href');
this.collection.sortField2 = currentSort;
$('#movies-area').spin();
}
<标题>更好的方法用它们所代表的事物命名,并封装逻辑。
在集合中,提供明确命名的setter。
server_api: {
/* ...snip... */
'year': function() {
return this.year || '2016';
},
'sort_by': function() {
return this.sortField || 'title.desc';
}
},
setYearFilter: function(value) {
if (value !== undefined) {
this.year = value;
return this.pager(options);
}
return reject();
},
并在视图中使用它们:
updateYear: function(e) {
e.preventDefault();
var currentYear = $(e.target).attr('href');
this.collection.setYearFilter(currentYear)
$('#movies-area').spin();
},
updateSortBy: function(e) {
e.preventDefault();
var currentSort = $(e.target).attr('href');
this.collection.updateOrder(currentSort);
$('#movies-area').spin();
}
最好的方法
更新到最新版本的骨干。Paginator,并不是说它会直接解决问题,但它会更容易找到帮助和文档。此外,还有其他功能!
标题>相关文章:
- backbone.js无法渲染视图
- 如何使用backbone.js从集合中获取模型名称
- Backbone LayoutManager渲染问题
- Backbone.js restful json API design
- Backbone虹吸以获取对象数组
- 2个backbone.js集合,具有相同的模型,但排序顺序不同
- Backbone.js micro templating
- FancyTree JS+Backbone.JS-将数据加载到FancyTree时出现问题
- Backbone.js将模型绑定到视图时出错
- minimy javascript是什么意思?Backbone.js
- 点击功能没有'ajax调用动态元素(Backbone)后无法工作
- Backbone.js视图中的多个模型
- 在哪里存储HTML模板以在Backbone.js中使用
- 带有jquery插件的backbone.js视图
- 如何使用Undercore和Backbone在HTML中表示模型属性
- Backbone listenTo不将jquery函数作为处理程序进行激发
- '单击'事件在Backbone中消失.使用流沙后查看
- 如何检查Backbone.View当前是否在DOM中呈现
- Backbone.paginator - Get toJSON of origModels
- 多个排序查询参数与Backbone.paginator