使用ember进行动态分页

Question

我们使用EmberJs来构建我们的webapp。 我有一个分页代码，从总共100个项目中每个显示5个项目。 所有的1000 个项目都来自单个API调用，并将作为数组传递给“模型” ; 并且控制器将根据页面号和页面大小对数组进行切片。

我想让框架动态化，这意味着我应该向服务器发送一个带有页面号和页面大小输入的API调用，并获得每个下一页单击的特定响应。

我的代码在这里。

路由器：

App.AccountPointsRoute = Ember.Route.extend({
    totalTransactions: null,
    model: function(params) {
        var page = this.controllerFor('accountPoints').get('page');
        var pointsURL= App.config.getEndpoint()+'/account/points';
        var getUserDetailsForViewUserAccount = function(){
            if(params.email){
                return Ember.$.getJSON(App.config.getEndpoint()+'/admin/userInfoByEmail?email='+params.email).then(function(data){
                    return data.payload.user.totalPoints;
                })
            }
        }
        var transactionURL = App.config.getEndpoint()+'/account/transactions?page='+page+'&pageSize=2&raceId=0&selectedDate='+ App.current_month() +'%20'+App.current_year();
        if(params.email){
             pointsURL = App.config.getEndpoint()+'/admin/points?email='+params.email;
             transactionURL = App.config.getEndpoint()+'/admin/transactions?page=1&pageSize=100&raceId=0&selectedDate='+ App.current_month() +'%20'+App.current_year()+'&email='+params.email;
        }
        var self = this;
        return Em.RSVP.hash({
            points:  Ember.$.getJSON(pointsURL).then(function(data){
                return data.payload;
            }),
            transactions: Ember.$.getJSON(transactionURL).then(function(data){
                self.set('totalTransactions', data.payload.totalRecords)
                return data.payload.logs;
            }),
            userPoints:getUserDetailsForViewUserAccount(),
        });
    },
    setupController: function(controller, models) {
        controller.set('points', models.points);
        controller.set('transactions', models.transactions);
        controller.set('userPoints',models.userPoints);
        controller.set('model', models.transactions);
        controller.set('totalRecords', this.get('totalTransactions'));
    }
});

而控制器就是这样

App.AccountPointsController = App.PaginationController.extend({
    needs:['application'],
    queryParams:['email', 'page'],
    page : 1,
    pageSize: 5,
    numPages: function () {
        var pageSize = this.get('pageSize'),
            //l = this.get('length');
            l = this.get('totalRecords');
        console.log("numPages "+ Math.ceil(l / pageSize));
        return Math.ceil(l / pageSize);
    }.property('pageSize','length'),

    paged: function() {
        var page = this.get('page');
        var transactions = this.get('model');
        var page = this.get('page') - 1,
        pageSize = this.get('pageSize'),
        start = page * pageSize,
        end = start + pageSize
        length = transactions.get('length');
        transactions = transactions.slice(start,end);
        this.set('length', length);
        return transactions;
    }.property('email', 'page', 'model', 'pageSize','pages'),

}); 

我需要编码以在'paged'方法内进行API调用以从服务器获取特定于页码的响应。 我期待着答案。

Answer 1

您不希望通过“分页”方法进行API调用，因为它位于控制器中。 您的路线应该处理API调用以检索模型的数据。

您想要的是模板中的链接包含指定所需页面和页面大小的查询参数。 所以类似于：

<div class ="tableNavigation">
    {{#link-to 'accounts' (query-params page=previousPage pagesize=currentPageSize)}}Previous Page{{/link-to}}
    {{#link-to 'accounts' (query-params page=nextPage pagesize=currentPageSize)}}Next Page{{/link-to}}
    Current Page: {{page}}
    Next: {{nextPage}}
    Prev: {{previousPage}}
</div>

然后在您的路由中包含params.nextPage和params.currentPageSize在您的AJAX调用的查询字符串中。 请注意，仅更改查询参数通常不会触发另一个API调用，因此也包括在您的路由中：

queryParams: {
        pagesize: {
            refreshModel: true
        },
        page: {
            refreshModel: true
        }
    },

然后在你的控制器中包含queryParams: ['page', 'pagesize']和这样的函数但带边界检查：

nextPage: function() {
        return (parseInt(this.get('page')) + 1);
}.property('page'),

previousPage: function() {
        return (parseInt(this.get('page')) - 1);
}.property('page'),