过滤收集后Backgrid分页程序无法正常工作 [英] Backgrid paginator not working after filtering collection
问题描述
我想实现我的收藏骨干分页backgrid。直到我实现了过滤器,它工作正常。之后,我筛选我的收藏,分页程序的页面数量的变化,但是当我点击其他网页,没有任何反应。这里是我的模型和收集与过滤功能:
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;
}
});
下面是我的表中的HTML:
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>
这是我的模板
<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。请帮我这个。谢谢你。
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.
推荐答案
终于想出了一个解决这个。不知道问题的根源还没有,但这里是我如何解决它:
Finally figured out a solution to this. Don't know the root of the problem yet, but here's how I solved it:
- 触发
resetCollection
函数首先 - 的
filterBy
函数返回这个
- Trigger
resetCollection
function first - Have
filterBy
function returnthis
所以在我的code中的resetCollection功能将类似于previous filterBy功能。
So 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
},
和我filterBy方法是简单地
And my filterBy method would be simply
filterBy: function(filterBy,projectName) {
return this;
},
所以...这就是解决了我的backgrid分页问题。我认为,previous方法也应该有工作。我认为这可能与两种backgrid或骨干....还是我的code是错误的错误:D。不管怎么说,希望这有助于与人面临类似的问题这一点。
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.
这篇关于过滤收集后Backgrid分页程序无法正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!