Question

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

我知道jPages和其他插件，但由于我是Ember.js的新手，我想知道是否有Ember方式使这项工作。我可以考虑传递条目的总量，手动循环渲染一定量，但我不认为这对我需要分页的其他区域非常便携。

我应该查看路由吗？

Answer 1

所以我转向创建一个看起来有点像这样的混合

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(),
[...]

依此类推，然后为它创建了一个单独的视图，因为这样我可以重复使用它，甚至可以在一个页面上多次重复使用它，方法是创建一个具有唯一id的容器div来附加视图的每个实例。追加。

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

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

firstCaseOfPaginationViews.appendTo('#transaction_pagination');

现在，mixin现在可以简单地包含在我需要分页的任何控制器中。我希望这是在Ember做事的正确方法，看起来这将是我采用的方式，直到我重构并重新审视。

Answer 2

如果你研究路由，你可以做一些事情（只是一个概念，不确定这是否正确）

App = Ember.Application.create({
        Router : Ember.Router.extend({
            root : Ember.Route.extend({
                pages : Ember.Route.extend({
                    route : '/page/:pageNo',
                    deserialize : function (router, params) {
                    var pageNumber = params.pageNo;
                    var contentToBeShown = //slice the relevant- 
                    //part from your content according to pageNo
                    <active>Controller.connectOutlet({
                        name: 'controllername',
                        outletName: 'outletshowingpages',
                        context: //theslicedarray
                        });
                    }
                    //add serialize also
                })
            })
        })
    });
App.initialize();

此处有更多路由：https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/router.js

Ember.js和Pagination

2 个答案: