时间戳

首页 > 解决方案 > Ember cli 分页 - 无法接收模型？

ember.js - Ember cli 分页 - 无法接收模型？

问题描述

使用 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;
}

标签： ember.js

解决方案

问题在articles.hbs文件中：

由于pagedContent是在相应的控制器中定义的，而不是任何类型的参数，因此该属性必须与this而不是一起使用@。因此更改此模板代码应该可以工作。

<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}} />

此外，控制器文件中存在拼写错误。由于这是一个类组件，因此 qps 必须定义为：

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

推荐阅读