29

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

多くの行を持つテーブルがあるため、ページネーションを使用してユーザーのデータ分析を支援したいと考えています。

は既に見ましたEmber.PaginationSupport.jsが、これを html ビューで操作する方法が見つかりません。

4

4 に答える 4

51

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

まず、ember コアにはまだ存在しないため、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 で上記の mixin を次のように使用する必要があります。

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

于 2012-10-23T15:01:28.050 に答える
2

After some improvements and help of my friend edgar we came up with a very simple solution that you could check out in GitHub

basically we extended Ember.ArrayProxy in order to accomplish the pagination and also added actions to manage the previus and next pages.

Thanks to @Toran Billups for his solution and algo @Jeremy Brown

于 2014-08-26T20:08:30.037 に答える
1

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

于 2013-03-22T13:40:34.587 に答える