"Load more" 来自服务器的内容并将其添加到页面

Question

关于 pagination/infinite scrolling/load 更多内容，我已经阅读了很多 pages/questions。

要么内容已完全预加载到商店中，要么请求新数据的示例根本不起作用。

我有一个显示 5 个帖子的博客，然后是一个 'load more' 按钮。点击此按钮后，我想从服务器请求另外 5 个帖子并将它们实时添加到页面。

this.store.find('post', {limit: 5, offset: 5, sort:'createdAt desc'});

能否提供一个工作示例或说明使其工作？

编辑：以下似乎是一个不错的选择，但我不知道如何让它工作

Make the model a standard array and use the route hooks and "load more" actions to fill it with records from ED query results

EDIT2 这是我为路线设置模型的方式：

import Ember from 'ember';

export default Ember.Route.extend({
   model: function() {
      return this.store.find('post', { isPublished: true,
                                       limit: 5,
                                       sort:'createdAt desc'});
   }
});

Answer 1

我在 GitHub 上为您创建了一个简单的应用程序：

https://github.com/andrusieczko/ember-loadMore-example

只需获取它，安装依赖项即可：

$ git clone https://github.com/andrusieczko/ember-loadMore-example.git
$ cd ember-loadMore-example
$ npm install
$ bower install # possibly you don't have to do that
$ npm start

然后前往 http://localhost:4200 那里有一条 link 到 #/post 的路线。

我已经介绍了如何使用 loadMore 按钮，但我还设置了 offset 变量，因此您可以轻松地将此代码转换为分页。

所以，在我的 routes/post.js 文件中，我定义了两个查询参数（虽然在这个例子中我实际上只使用 limit）：

export default Ember.Route.extend({
  queryParams: {
    limit: {
      refreshModel: true
    },
    offset: {
      refreshModel: true
    }
  },

  model: function(params) {
    return this.store.find('post', {
      limit: params.limit,
      offset: params.offset
    });
  }
});

这设置了两个查询参数。 refreshModel: true 导致在查询参数更改时从服务器获取新数据（model 挂钩被调用）。

要使其正常工作，您还必须在控制器中定义查询参数 (controllers/post.js):

export default Ember.Controller.extend({
  queryParams: ['limit', 'offset'],
  limit: 20,
  offset: 0,

  pageSize: 20,

  actions: {
    loadMore: function() {
      this.set('limit', this.get('limit') + this.get('pageSize'));
    }
  }
});

而 loadMore 操作只是将 pageSize 添加到现有的 limit。

模板 (templates/post.hbs) 看起来像这样：

<h1>Posts</h1>

<ul>
  {{#each post in model}}
    <li>{{post.id}}. {{post.name}}</li>
  {{/each}}
</ul>

<button {{action 'loadMore'}}>Load more</button>

为了获得完整的示例，我创建了一个可以理解 limit 和 offset:

的简单服务器端

app.get('/api/posts', function(req, res) {
  var limit = parseInt(req.query.limit);
  var offset = parseInt(req.query.offset) || 0;

  var filteredItems = items;
  if (limit) {
    filteredItems = items.slice(offset, (offset+limit));
  } else {
    filteredItems = items.slice(offset);
  }
  res.send({
    post: filteredItems
  });
});

其中 items 是一个包含 100 个元素的数组 [{id: 0, name: 'post0'},{id: 1, name: 'post1'},...。

因此 model 结构 (models/post.js):

export default DS.Model.extend({
  name: DS.attr('string')
});

我希望它能帮助您了解如何在您的项目中实施该解决方案。

尽情享受吧！

"Load more" 来自服务器的内容并将其添加到页面

"Load more" content from the server and add it to the page

ember.js

pagination

ember-cli