javascript - 使用 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

快速修复

直接在 View 的事件回调中更改值:

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();
},

并在 View 中使用它们:

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 ，并不是说它会直接解决问题，但会更容易找到帮助和文档。此外，还有附加功能!