Exemple complet de pagination Ember

Question

Je me demandais s'il existait un exemple complet permettant de démontrer comment utiliser la pagination avec ember.js.

J'ai un tableau qui a de nombreuses lignes, je veux donc utiliser la pagination pour aider l'utilisateur avec l'analyse des données.

J'ai déjà vu le Ember.PaginationSupport.js mais je n'arrive pas à trouver un moyen de travailler avec cela dans une vue html.

Answer 1

L'exemple mis à jour ci-dessous fonctionne avec ember.js RC1 -- 03/14/2013

Tout d'abord, vous devez ajouter un mixin de type pagination, car il n'en existe pas encore dans le noyau d'Ember.

var get = Ember.get, set = Ember.set;

Ember.PaginationMixin = Ember.Mixin.create({

  pages: function() {

    var availablePages = this.get('availablePages'),
    pages = [],
    page;

    for (i = 0; i < availablePages; i++) {
      page = i + 1;
      pages.push({ page_id: page.toString() });
    }

    return pages;

  }.property('availablePages'),

  currentPage: function() {

    return parseInt(this.get('selectedPage'), 10) || 1;

  }.property('selectedPage'),

  nextPage: function() {

    var nextPage = this.get('currentPage') + 1;
    var availablePages = this.get('availablePages');

    if (nextPage <= availablePages) {
        return Ember.Object.create({id: nextPage});
    }else{
        return Ember.Object.create({id: this.get('currentPage')});
    }

  }.property('currentPage', 'availablePages'),

  prevPage: function() {

    var prevPage = this.get('currentPage') - 1;

    if (prevPage > 0) {
        return Ember.Object.create({id: prevPage});
    }else{
        return Ember.Object.create({id: this.get('currentPage')});
    }

  }.property('currentPage'),

  availablePages: function() {

    return Math.ceil((this.get('content.length') / this.get('itemsPerPage')) || 1);

  }.property('content.length'),

  paginatedContent: function() {

    var selectedPage = this.get('selectedPage') || 1;
    var upperBound = (selectedPage * this.get('itemsPerPage'));
    var lowerBound = (selectedPage * this.get('itemsPerPage')) - this.get('itemsPerPage');
    var models = this.get('content');

    return models.slice(lowerBound, upperBound);

  }.property('selectedPage', 'content.@each')

});

Ensuite, vous devez utiliser le mixin ci-dessus dans votre ArrayController comme suit

PersonApp.PersonController = Ember.ArrayController.extend(Ember.PaginationMixin, {  
    itemsPerPage: 2
});

Ensuite, vous pouvez ajouter une vue d'aide simple pour afficher les numéros de page sous forme de balises li.

PersonApp.PaginationView = Ember.View.extend({
    templateName: 'pagination',
    tagName: 'li',

    page: function() {
        return Ember.Object.create({id: this.get('content.page_id')});
    }.property()
});

Vos itinéraires pourraient ressembler à ceci (page imbriquée sous le parent)

PersonApp.Router.map(function(match) {
    this.resource("person", { path: "/" }, function() {
        this.route("page", { path: "/page/:page_id" });
    });
});

PersonApp.PersonPageRoute = Ember.Route.extend({
    model: function(params) {
        return Ember.Object.create({id: params.page_id});
    },
    setupController: function(controller, model) {
        this.controllerFor('person').set('selectedPage', model.get('id'));
    }
});

PersonApp.PersonRoute = Ember.Route.extend({
    model: function(params) {
        this.controllerFor('person').set('selectedPage', 1);
        return PersonApp.Person.find();
    }
});

Et enfin, vous devez ajouter du html pour l'afficher

<script type="text/x-handlebars" data-template-name="application">

  <div id="main">
    {{ outlet }}
  </div>

</script>

<script type="text/x-handlebars" data-template-name="person">

<table width="250px">                                                               
<thead>
<th>id</th>
<th>username</th>
</thead>
<tbody>
   {{#each person in controller.paginatedContent}}
    <tr>
      <td>{{person.id}}</td>
      <td>{{view Ember.TextField valueBinding="person.username"}}</td>
    </tr>
   {{/each}}
</tbody>
</table>

<div name="prev">{{#linkTo 'person.page' prevPage target="controller"}}Prev{{/linkTo}}</div>
<ul class="pagination gui-text">
  {{#each pages}}
    {{view PersonApp.PaginationView contentBinding="this"}}
  {{/each}}
</ul>
<div name="next">{{#linkTo 'person.page' nextPage target="controller"}}Next{{/linkTo}}</div>

</script>

<script type="text/x-handlebars" data-template-name="pagination">

{{#with view}}
{{#linkTo 'person.page' page}}
  {{content.page_id}}
{{/linkTo}}                                                                         
{{/with}}

</script>

Voici un projet complet avec ce système en action si vous voulez le voir fonctionner.

https://github.com/toranb/ember-pagination-example

Answer 2

Après quelques améliorations et l'aide de mon ami Edgar, nous sommes arrivés à une solution très simple que vous pouvez vérifier dans GitHub

Fondamentalement, nous avons étendu Ember.ArrayProxy afin d'accomplir la pagination et avons également ajouté des actions pour gérer les pages précédentes et suivantes.

Merci à @Toran Billups pour sa solution et son algo @Jeremy Brown

Answer 3

J'ai eu beaucoup de succès avec https://github.com/notmessenger/emberjs-pageable mais Ember a maintenant quelque chose d'intégré nativement dans ArrayController appelé arrangedContent qui fait ça. Vous pouvez également spécifier des ordres de tri par défaut sur des champs spécifiques de vos modèles. Ember.js et arrangedContent en parle un peu.