mercredi 29 juillet 2020

Ember cli pagination - unable

Working with Ember 3.19 and trying to use ember-cli-pagination. I have all my posts from JSONplaceholder in the data-store under model type 'post'. I was able to view all the posts from the data-store without pagination but have been unsuccessful in implementing ember-cli-pagination. Console shows currentPage and totalPages as undefined. The Articles element shows in the ember inspector but blank in chrome. The PageNumbers element appears but it is rendered as <<< ... NaN >>>

Controller - 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;
}

Handlebar - articles.hbs

<h2>Posts</h2>
<div>
<ul>
    
    <li>User:  Title:  - </li>
    
</ul>
</div>

<PageNumbers @content= />

Model - post.js

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

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



Aucun commentaire:

Enregistrer un commentaire