我正在尝试在我的主干集合上实现backgrid分页。 它工作正常，直到我实现过滤器。 在我过滤我的收藏后，分页器的页码会改变，但是当我点击另一页时，没有任何反应。 这是我的模型和带有过滤功能的集合：
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; } });这是我的表格的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>我在做什么？ 我似乎无法在任何地方找到答案。 另外我应该提一下，我是骨干js的新手。 请帮我解决一下这个。 谢谢。
I am trying to implement backgrid pagination on my backbone collection. It works fine until I implement the filter. After I filter my collection, the paginator's page number changes but when I click the other page, nothing happens. Here's my model and collection with the filter function:
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(); }, });Here's my pagination view:
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; } });Here's the HTML for my table:
<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>And here's my template
<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>What am I doing worng? I cannot seem to find the answer anywhere. Also I should mention that I am new to backbone js. Please help me with this. Thanks.
最满意答案
终于找到了解决方案。 不知道问题的根源，但这是我如何解决它：
首先触发resetCollection函数 有filterBy函数返回this所以在我的代码中，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; },所以...这就解决了我的背景分页问题。 我认为以前的方法也应该有效。 我认为这可能是背景或主干的错误....或者我的代码有问题：D。 无论如何，希望这有助于面对类似问题的人。
Finally figured out a solution to this. Don't know the root of the problem yet, but here's how I solved it:
Trigger resetCollection function first Have filterBy function return thisSo in my code the resetCollection function would be similar to the previous filterBy function.
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 },And my filterBy method would be simply
filterBy: function(filterBy,projectName) { return this; },So... this is what solved my backgrid pagination problem. I think the previous method should also have worked. I think it could be a bug with either backgrid or backbone.... or my code was faulty :D. Anyway, hope this helps with someone facing the similar problem to this.
更多推荐
发布评论