web-dev-qa-db-ja.com

Emberページネーションの完全な例

Ember.jsでページネーションを使用する方法を示すことができる完全な例があるかどうか疑問に思っていました

多くの行があるテーブルがあるので、ページ分割を使用してユーザーがデータ分析を行えるようにしたいと思います。

Ember.PaginationSupport.jsはすでに表示されていますが、これをHTMLビューで操作する方法が見つかりません。

ember.js
29
Juan Jardim

以下の更新された例はember.js RC1で動作します-2013年3月14日

ember coreにはまだ存在しないので、まずmixinのようなページネーションを追加する必要があります。

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')

});

次に、上記のミックスインをArrayControllerで使用する必要があります。

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

次に、シンプルなヘルパービューを追加して、ページ番号をliタグとして表示できます

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

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

ルートは次のようになります（親の下にネストされたページ）

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();
    }
});

最後に、表示するhtmlを追加する必要があります

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

これが機能することを確認したい場合は、これが動作している完全に機能するプロジェクトを次に示します

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

51
Toran Billups

いくつかの改善と私の友人のedgarの助けの後、私たちはあなたがチェックアウトできる非常にシンプルな解決策を思いつきました GitHub

基本的に、ページ付けを行うためにEmber.ArrayProxyを拡張し、前のページと次のページを管理するアクションも追加しました。

@Toran Billups氏の解決策とアルゴ@Jeremy Brownに感謝

2
Juan Jardim

私は https://github.com/notmessenger/emberjs-pageable で大成功を収めましたが、Emberは、ArrayControllerにarrangedContentこれを行います。モデルの特定のフィールドにデフォルトの並べ替え順序を指定することもできます Ember.js and expandedContent は、それについて少し説明しています。

1
Jeremy Brown

このnpmモジュールをチェックして、Emberでの単純なページ付けの実装を確認することができます。 Ember CLI Simple Pagination

0
kattybilly