灰燼分頁完整的例子

Question

我想知道是否有可能證明我們如何可以使用帶有ember.js

我已經是有許多行的表，所以我想用分頁來幫助分頁的完整範例用戶進行數據分析。

我已經看到Ember.PaginationSupport.js，但我找不到在html視圖中使用此方法的方法。

Answer 1

更新例如下面ember.js RC1工程 - 2013年3月14日

首先，你需要添加像混入分頁作爲一個還沒有在餘燼核心存在

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

}); 

接下來你需要使用的mixin以上的ArrayController像這樣

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

接下來，您可以添加一個簡單的輔助視圖中顯示頁碼李標籤

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

Answer 2

我已經與https://github.com/notmessenger/emberjs-pageable取得了巨大的成功，但Ember現在有一些內置到ArrayController中的東西，稱爲arrangedContent這樣做。您還可以在模型的特定字段上指定默認排序順序。 Ember.js and arrangedContent談論它一點點。

Answer 3

一些改進和我的朋友埃德加的幫助後，我們想出了一個非常簡單的解決方案，你可以在GitHub

退房基本上我們爲了實現分頁擴展Ember.ArrayProxy也加入到管理行動上一頁和下一頁。

感謝@Toran比盧普斯對他的解決方案和算法中@Jeremy布朗

Answer 4

你可能要檢查這個NPM模塊爲灰燼一個簡單的分頁實現： Ember CLI Simple Pagination