Ember.js和分页(Ember.js and Pagination)

2019-07-31 05:36发布

所以,问题是,我试图从一个JSON数据文件(约5000个),进入表行装载了不少项目,我想知道什么是处理分页的最佳方法。

我知道jPages,和其他插件,但我是相当新的Ember.js,我想知道是否有使这项工作的灰烬方式。 我还挺想通过条目的总量,手动循环渲染通过一组量,但我不认为这是非常便携的地方,我需要分页等领域。

我应该考虑路由?

Answer 1:

于是我转身朝着建立一个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(),
[...]

依此类推,然后创建一个独立的观点吧,因为这样我可以重新使用它,甚至重复使用一个单页上许多次,通过唯一的ID创建容器div来追加到视图的每个实例追加。

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

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

firstCaseOfPaginationViews.appendTo('#transaction_pagination');

而现在,混入现在可以简单地纳入到我需要分页任何控制器。 我希望这是灰烬做事的正确方法,好像这将是我就收养,直到我重构并在以后的日子重温的方式。



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 and Pagination