灰烬分页完整的例子

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