Несколько параметров сортировки запроса с 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,
Поэтому я добавил это в год:
'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>
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();
}
Лучший путь
Назовите вещи с тем, что они представляют, и включите логику.
В коллекции предлагают сеттеров с четкими именами.
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, но не для того, чтобы она решала проблему напрямую, но вам будет легче найти помощь и документацию. Также дополнительные функции!