Ember cli 分页 - 无法接收模型?

Ember cli pagination - unable to receive model?

使用 Ember 3.19 并尝试使用 ember-cli-pagination。我的所有帖子都来自模型类型 'post' 下的数据存储中的 JSONplaceholder。我能够在没有分页的情况下查看数据存储中的所有帖子,但未能成功实施 ember-cli-pagination。控制台将 currentPage 和 totalPages 显示为未定义。 Articles 元素显示在 ember 检查器中,但在 chrome 中显示为空白。 PageNumbers 元素出现,但呈现为 <<< ... NaN >>>

控制器 - articles.js

import Controller from "@ember/controller";
import { tracked } from "@glimmer/tracking";
import { alias, oneWay } from "@ember/object/computed";
import pagedArray from "ember-cli-pagination/computed/paged-array";
import { inject as service } from '@ember/service'

export default class ArticlesController extends Controller {
  // setup our query params
  queryParams: ["page", "perPage"];

  // set default values, can cause problems if left out
  // if value matches default, it won't display in the URL
  @tracked page = 1;
  @tracked perPage = 10;

  // can be called anything, I've called it pagedContent
  // remember to iterate over pagedContent in your template
  @pagedArray('model', {
    page: alias("parent.page"),
    perPage: alias("parent.perPage"),
  })
  pagedContent;

  // binding the property on the paged array
  // to a property on the controller
  @oneWay("pagedContent.totalPages") totalPages;
}

车把 - articles.hbs

<h2>Posts</h2>
<div>
<ul>
    {{#each @pagedContent as |post|}}
    <li>User: {{post.user}} Title: {{post.title}} - {{post.body}}</li>
    {{/each}}
</ul>
</div>

<PageNumbers @content={{@pagedContent}} />

型号 - post.js

import Model, { attr } from '@ember-data/model';

export default class ArticleModel extends Model {
  @attr title;
  @attr body;
  @attr userId;
}

问题出在 articles.hbs 文件中:

由于pagedContent是在相应的控制器中定义的,不是任何类型的参数,因此属性必须与[=14=一起使用] 而不是 @。因此更改此模板代码应该有效。

<h2>Posts</h2>
<div>
<ul>
    {{#each this.pagedContent as |post|}}
    <li>User: {{post.user}} Title: {{post.title}} - {{post.body}}</li>
    {{/each}}
</ul>
</div>

<PageNumbers @content={{this.pagedContent}} />

此外,控制器文件中有错字。由于这是一个 class 组件,因此 qps 必须定义为:

queryParams = ["page", "perPage"];