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"];
使用 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"];