过滤后背景网格分页器不工作 collection

Question

我正在尝试在我的 backbone collection 上实现背景网格分页。在我实施过滤器之前它工作正常。在我过滤 collection 之后，分页器的页码发生变化，但是当我单击其他页面时，没有任何反应。这是我的模型和具有过滤功能的 collection：

var Project = Backbone.Model.extend({});
var ProjectCollection = Backbone.PageableCollection.extend({
    model: Project,
    state: {pageSize: 2},
    mode: "client",
    queryParams: {
        currentPage: "current_page",
        pageSize: "page_size"
    },
    filterBy: function(filterBy,projectName) {
        var filteredProj = this.fullCollection.filter(function(model) {
            if(model.get(filterBy).indexOf(projectName) !== -1) {
                return true;
            }
            return false;
        });
        return new ProjectCollection(filteredProj);
    },
    sortBy: function(sortingKey) {
        this.setSorting(sortingKey);
        this.fullCollection.sort();
    },
});

这是我的分页视图：

var PaginationView = Backbone.View.extend({
    tagName:"div",
    el:".backgrid-paginator",
    initialize: function(){
        _.bindAll(this,'render','filterRender');
        this.collection.on("reset",this.render);
        this.collection.on("filter-by-project", this.filterRender);
    },

    filterRender: function (filterBy,projectName) {
        if (!projectName) this.render;
        var filteredProj = this.collection.filterBy(filterBy,projectName);
        var filteredPaginator = new Backgrid.Extension.Paginator({
            collection: filteredProj
        });
        this.$el.html("");
        this.$el.append(filteredPaginator.render().el);
        return this;
    },
    render: function(){
        var paginator = new Backgrid.Extension.Paginator({
            collection: this.collection
        });
        this.$el.html("");
        this.$el.append(paginator.render().el);
        return this;
    }
});

这是我的 table 的 HTML：

<div class="form-group col-md-4 pull-right">
        <input type="text" id="filter" name="filter" class="form-control" placeholder="Filter Projects">
    </div>
        <div class="col-md-12 margin-top" id="responsive-table">
            <table class="table table-responsive" >
                <thead>
                    <th id="sortBy-name">Projects</th>
                    <th id="sortBy-sector">Sector</th>
                    <th id="sortBy-status">Status</th>
                    <th id="sortBy-org">Funding Organisation</th>
                    <th id="sortBy-location">Location</th>
                    <th id="sortBy-budget">Budget</th>
                </thead>
                <tbody id="projects-list">
                </tbody>
            </table>
        <div class="backgrid-paginator"></div>
    </div>

这是我的模板

<script type="text/template" id="project-row-template">
            <td><a href="/frontend/activity/details/<%= id %>"><%= name %></a></td>
            <td><%= sector %></td>
            <td><%= status %></td>
            <td><%= fundingOrganisation %></td>
            <td><%= location %></td>
            <td><%= budget %></td>
    </script>

我在做什么？我似乎无法在任何地方找到答案。另外我应该提到我是 backbone js 的新手。请帮我解决一下这个。谢谢。

Answer 1

终于找到了解决办法。还不知道问题的根源，但我是这样解决的：

先触发resetCollection函数
有filterBy功能returnthis

因此在我的代码中，resetCollection 函数与之前的 filterBy 函数类似。

resetCollection: function(filterBy,projectName) {
    var filteredProj = this.fullCollection.filter(function(model) {
        if(model.get(filterBy).indexOf(projectName) !== -1) {
            return true;
        }
        return false;
    });
    this.fullCollection.reset(filteredProj);  // Only change in previous filterBy function
},

我的 filterBy 方法很简单

filterBy: function(filterBy,projectName) {
    return this;
},

所以...这就是解决我的背景网格分页问题的方法。我想以前的方法应该也管用。我认为这可能是背景网格或 backbone... 的错误，或者我的代码有问题：D。无论如何，希望这对面临类似问题的人有所帮助。

过滤后背景网格分页器不工作 collection

Backgrid paginator not working after filtering collection

javascript

pagination

backbone.js

underscore.js

backgrid