Ember.js和分页 [英] Ember.js and Pagination

问题描述

所以问题是，我正在尝试从JSON数据文件（大约5000个条目）加载相当多的条目到表行，我想知道什么是最好的方式来处理分页。 / p>

我知道jPages和其他插件，但是当我对Ember.js来说是相当新鲜的时候，我想知道是否有一个Ember的做这个工作。我可以想到通过条目的总数量，手动循环渲染一个设定的数量，但我不认为这将是非常便携的其他地区，我需要分页。

我应该查看路由吗？

解决方案

所以我转向创建一个看起来像这样的mixin。

  App.PaginationHelper = Em.Mixin.create（{
 pageSize： 10，
 totalLines：20，
 rangeStart：1，
 rangeStop：function（）{
 var rangeStop = get（this，'rangeStart'）+ get（this，'pageSize '） -  1; 
 totalLines = get（this，'totalLines'）; 
 if（rangeStop< totalLines）{
 return rangeStop; 
} 
 return totalLines ; 
} .property（），
 
 currentPage：function（）{
 return get（this，'rangeStop'）/ get（this，'pageSize'）; 
} .property（），
 
 totalPages：function（）{
 return Math.ceil（get（this，'totalLines'）/ get（this，'pageSize'））; 
} .property（），
 [...] 
  

等等然后创建一个sep通过这种方式，我可以重复使用它，甚至可以在单个页面上重复使用多次，通过创建一个具有唯一ID的容器div来附加视图的每个实例化来附加。

所以我可以用新变量重复下一行，但是通过保持templateName相同来重用该模板。

  var firstCaseOfPaginationViews = Em.View.create（{
 templateName：'pagination'
 [...] 
}）; 
 
 firstCaseOfPaginationViews.appendTo（'＃transaction_pagination'）; 
  

现在，mixin现在可以简单地包含在我需要分页的任何控制器上。我希望这是在Ember做正确的方法，似乎这将是我将采用的方式，直到我重构和再次访问。

So the issue is that, I'm trying to load quite a bit of entries from a JSON data file (about 5000 entries), into table rows, and I was wondering what would be the best way to handle pagination.

I'm aware of jPages, and other plug-ins, but as I'm fairly new to Ember.js, I wanted to know if there was an Ember way of making this work. I can kinda think of passing the total amount of the entries, manually loop a render through a set amount, but I don't think that would be very portable to other areas where I would need pagination.

Should I look into Routing?

解决方案

So I turned towards creating a mixin that looks a bit like this

App.PaginationHelper = Em.Mixin.create({
    pageSize: 10,
    totalLines: 20,
    rangeStart: 1,
    rangeStop: function () {
        var rangeStop = get(this, 'rangeStart') + get(this, 'pageSize') - 1;
        totalLines = get(this, 'totalLines');
        if (rangeStop < totalLines) {
            return rangeStop;
        }
        return totalLines;
    }.property(),

    currentPage: function () {
        return get(this, 'rangeStop') / get(this, 'pageSize');
    }.property(),

    totalPages: function () {
        return Math.ceil(get(this, 'totalLines') / get(this, 'pageSize'));
    }.property(),
[...]

And so on, then created a separate view for it, as this way I can reuse it, and even reuse it many times on a single page, by creating a container div with a unique id to append each instantiation of the view to append to.

So I can repeat the next lines with new variables, but reuse the template by keeping the templateName the same.

var firstCaseOfPaginationViews = Em.View.create({
    templateName: 'pagination'
    [...]
});

firstCaseOfPaginationViews.appendTo('#transaction_pagination');

And now, the mixin can now be simply included to any controller that I need pagination for. I'm hoping this is the correct way of doing things in Ember, it seems like this will be the way that I'll adopt until I refactor and revisit at a later date.

这篇关于Ember.js和分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！