多重排序查詢參數與Backbone.paginator

Question

我跟了一個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> 

Answer 1

的QuickFix

直接改變這些值在視圖的事件回調：

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的最新版本，而不是它會直接解決這個問題，但它會更容易尋求幫助和文件。另外，還有其他功能！