web-dev-qa-db-fra.com

Exemple complet de pagination Ember

Je me demandais s'il existe un exemple complet qui pourrait démontrer comment utiliser la pagination avec ember.js

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

J'ai déjà vu le Ember.PaginationSupport.js mais je ne trouve pas le moyen de travailler avec cela dans une vue HTML.

ember.js
29
Juan Jardim

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

Vous devez d’abord ajouter une pagination telle que mixin, car elle n’existe pas encore dans le noyau de braise.

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 si

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

Ensuite, vous pouvez ajouter une simple vue d'assistance 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 peuvent 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 code 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 de travail complet avec cela en action si vous voulez le voir fonctionner

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

51
Toran Billups

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

en gros, nous avons étendu Ember.ArrayProxy afin de réaliser la pagination et ajouté des actions pour gérer les pages précédentes et suivantes.

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

2
Juan Jardim

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

1
Jeremy Brown

Vous voudrez peut-être vérifier ce module npm pour une implémentation simple dans Ember: Ember CLI Simple Pagination

0
kattybilly