Question

我在emberjs中遇到分页问题...我的主要问题是，当我呼叫服务器获取数据时，它会使用正确的数据进行响应，但是当它转到路由时再次调用它...

//所以这是queryParams中的路由我发送“filter”，“pageSize”和“page”：

App.IndexDisplayRoute = Ember.Route.extend({
model: function (params, queryParams) {
    "use strict";
    if (!localStorage.authUser) {
        this.transitionTo('signin');
    } else {
        return this.store.find('user', { fields: queryParams });
    }
}});

//这里是我的控制器，刷新方法... filter和pageSize保存并且有效，但页面不是......

App.IndexDisplayController = Ember.ArrayController.extend({
content: ["index", "indexCreate"],
fields: {
    "filter": null,
    "pageSize": 10,
    "page": 0,
    "modelSize": localStorage.modelSize
},
init: function () {
    "use strict";
    this.refreshUsersTable();
},
refreshUsersTable: function () {
    "use strict";
    var that = this,
        pageSize,
        page,
        filter,
        pages,
        i,
        index,
        size,
        $el = $(".pagination");

    pageSize = this.get("fields.pageSize");
    page = this.get("fields.page");
    filter = this.get("fields.filter");
    size = this.get('fields.modelSize');
    pages = Math.ceil(size / pageSize);

    $el.empty();
    $el.prepend('<li><a href="#">&laquo;</a></li>');
    for (i = 0; i < pages; i++) {
        index = i + 1;
        $el.append('<li title="' + i + '"><a href="#">' + index + '</a></li>');
        $el.find('li').on('click', function () {
            var thisPage = $(this).attr("title");
            that.set("fields.page", thisPage);
            localStorage.currentPage = thisPage;
            that.refreshUsersTable();
        });
    }
    $el.append('<li><a href="#">&raquo;</a></li>');

    this.transitionToRoute('index.display', {queryParams: {filter: this.get("fields.filter"), pageSize: this.get("fields.pageSize"), page: this.get('fields.page')}});
}});

此代码有什么问题？

更新

现在我的控制器计算页面并设置数组，其值如下：

App.IndexDisplayController = Ember.ArrayController.extend({
content: ["index", "indexCreate"],
fields: {
    "filter": null,
    "pageSize": 10,
    "page": 0,
    "modelSize": localStorage.modelSize,
    "pages" : []
},
init: function () {
    "use strict";
    //draw pagination for first time
    this.refreshUsersTable();
},
refreshUsersTable: function (selectedPage) {
    "use strict";
    //vars declaration
    var that = this,
        pageSize,
        page,
        filter,
        pages,
        i,
        index,
        size,
        modelPages = [];

    //get values binded from template fields
    pageSize = this.get("fields.pageSize");
    page = selectedPage;
    filter = this.get("fields.filter");
    size = this.get('fields.modelSize');
    pages = Math.ceil(size / pageSize);

    //fill pages array for calc list elements
    for (i = 0; i < pages; i++) {
        index = i + 1;
        modelPages.push(i);
    }
    //set up pages as modelPages
    this.set('fields.pages', modelPages);

    //transition back to route with updated params
    this.transitionToRoute('index.display', {queryParams: {filter: filter, pageSize: pageSize, page: page}});
}});

和把手模板看起来像这样：

<script type="text/x-handlebars" data-template-name="index/display">
<div class="row"><div class="col col-sm-12"><div class="separator"><h5>USERS</h5></div></div></div>

<div class="form-group">
    <label class="col-xs-1 control-label">Filter:</label>
    <div class="col-sm-2">
        {{input type="text" class="form-control" id="inputEntryFilter" placeholder="filter" value=fields.filter }}
    </div>
    <label class="col-xs-2 control-label">Page size:</label>
    <div class="col-sm-1">
    {{input type="text" class="form-control" id="inputEntryOnPage" placeholder="" value=fields.pageSize }}
    </div>
    <label class="col-xs-1 control-label">Page:</label>
    <div class="col-xs-3">
        <ul class="pagination pagination-sm">
        <li><a href="#">&laquo;</a></li>
        {{#each fields.pages}}
            <li {{action 'refreshUsersTable' this}}><a href="#">{{this}}</a></li>
        {{/each}}
        <li><a href="#">&raquo;</a></li>
        </ul>
    </div>

    <div class="col-sm-1">
        <button class="btn btn-sm pull-left" {{action 'refreshUsersTable' this}}>Refresh</button>
    </div>
</div></script>

Answer 1

转换为跳过模型挂钩时发送模型而不是参数。如果您发送参数，它将重新启动模型钩子。

老实说，这看起来像是无限的样子，它会如何从过渡到自身的循环中消失？

此外，如果你覆盖init，你应该在被覆盖的版本中调用this._super()，这样ember也可以执行它的默认实现。

emberjs调用服务器请求两次..第一次是好的，但它刷新第二个错误

1 个答案: