Javascript 使用ember的动态分页

我们使用EmberJs来构建我们的Web应用程序。我有一个分页代码，在总共100个项目中，每个项目显示5个项目。 所有1000个100项都来自一个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调用，以从服务器获取特定于页码的响应。

---

我期待着答案。

您不想从“paged”方法进行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>

然后在控制器中包括

queryParams:['page'，'pagesize']

和类似的函数，但带有边界检查：

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

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

---

谢谢你的解决方案，但对我不起作用。我的pagination.hbs与您建议的方式相同，我还添加了其他更改。但是当页面更改/查询参数更改时，模型不会刷新，尽管我使用了refreshModel:true。你能帮我摆脱困境吗？到底出了什么问题？当页面更改时，您是否没有对服务器进行新的AJAX调用？你是在打电话但不处理回复吗？这是一个如何进行服务器端排序的示例，与之进行比较可能会对您有所帮助。我查看了您的JSBin代码片段，并尝试了didQueryParamsChange，它很有效。它解决了我的问题。我会编辑你的答案并接受它！

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

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