我已经关注tutorial（source code）并且一切正常但我有一个问题，排序有效，但如何添加其他排序选项？
例如我有这个
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。
所以我在年内添加了这个：
'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>
答案 0 :(得分：1)
直接在视图的事件回调中更改值：
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();
}
更新到backbone.paginator的最新版本，而不是直接解决问题，但它更容易找到帮助和文档。此外，还有其他功能！