Ember 分页完整示例 [英] Ember pagination full example
问题描述
我想知道是否有一个完整的例子可以演示我们如何在 ember.js 中使用分页
我有一个有很多行的表,所以我想使用分页来帮助用户进行数据分析.
我已经看到了 Ember.PaginationSupport.js
但我找不到在 html 视图中使用它的方法.
下面的更新示例适用于 ember.js RC1 -- 03/14/2013
首先你需要添加一个像 mixin 这样的分页,因为在 ember 核心中还不存在这个分页
var get = Ember.get, set = Ember.set;Ember.PaginationMixin = Ember.Mixin.create({页面:函数(){var availablePages = this.get('availablePages'),页数 = [],页;for (i = 0; i < availablePages; i++) {页 = i + 1;pages.push({ page_id: page.toString() });}返回页面;}.property('availablePages'),当前页面:函数(){返回 parseInt(this.get('selectedPage'), 10) ||1;}.property('selectedPage'),下一页:函数(){var nextPage = this.get('currentPage') + 1;var availablePages = this.get('availablePages');如果(nextPage <= availablePages){return Ember.Object.create({id: nextPage});}别的{return Ember.Object.create({id: this.get('currentPage')});}}.property('currentPage', 'availablePages'),上一页:函数(){var prevPage = this.get('currentPage') - 1;如果(上一页> 0){return Ember.Object.create({id: prevPage});}别的{return Ember.Object.create({id: this.get('currentPage')});}}.property('currentPage'),可用页面:函数(){return Math.ceil((this.get('content.length')/this.get('itemsPerPage')) || 1);}.property('content.length'),分页内容:函数(){var selectedPage = this.get('selectedPage') ||1;var upperBound = (selectedPage * this.get('itemsPerPage'));var lowerBound = (selectedPage * this.get('itemsPerPage')) - this.get('itemsPerPage');var 模型 = this.get('content');返回models.slice(lowerBound, upperBound);}.property('selectedPage', 'content.@each')});
接下来你需要像这样在你的 ArrayController 中使用上面的 mixin
PersonApp.PersonController = Ember.ArrayController.extend(Ember.PaginationMixin, {每页项目数:2});
接下来你可以添加一个简单的辅助视图来将页码显示为 li 标签
PersonApp.PaginationView = Ember.View.extend({模板名称:'分页',tagName: 'li',页面:函数(){return Ember.Object.create({id: this.get('content.page_id')});}.财产()});
您的路线可能看起来像这样(在父页面下嵌套页面)
PersonApp.Router.map(function(match) {this.resource("person", { path: "/" }, function() {this.route("page", { path: "/page/:page_id" });});});PersonApp.PersonPageRoute = Ember.Route.extend({模型:函数(参数){返回 Ember.Object.create({id: params.page_id});},设置控制器:功能(控制器,模型){this.controllerFor('person').set('selectedPage', model.get('id'));}});PersonApp.PersonRoute = Ember.Route.extend({模型:函数(参数){this.controllerFor('person').set('selectedPage', 1);返回 PersonApp.Person.find();}});
最后,你需要添加一些html来显示它
<script type="text/x-handlebars" data-template-name="person"><表格宽度="250px"><头><th>id</th><th>用户名</th></thead>{{#controller.paginatedContent 中的每个人}}<tr><td>{{person.id}}</td><td>{{view Ember.TextField valueBinding="person.username"}}</td></tr>{{/每个}}</tbody><div name="prev">{{#linkTo 'person.page' prevPage target="controller"}}Prev{{/linkTo}}</div><ul class="pagination gui-text">{{#每一页}}{{view PersonApp.PaginationView contentBinding="this"}}{{/每个}}<div name="next">{{#linkTo 'person.page' nextPage target="controller"}}Next{{/linkTo}}</div><script type="text/x-handlebars" data-template-name="pagination">{{#with view}}{{#linkTo 'person.page' 页面}}{{content.page_id}}{{/链接到}}{{/和}}这是一个完整的工作项目,如果你想看到它的工作
https://github.com/toranb/ember-pagination-example
I was wondering if there is a complete example that could demonstrate how can we use pagination with ember.js
I have a table that has many rows, so i want to use pagination to help the user with the data analysis.
I've already see the Ember.PaginationSupport.js
but i can't find a way to work with this in a html view.
解决方案 The updated example below works with ember.js RC1 -- 03/14/2013
First you need to add a pagination like mixin as one doesn't yet exist in the ember core
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')
});
Next you need to use the mixin above in your ArrayController like so
PersonApp.PersonController = Ember.ArrayController.extend(Ember.PaginationMixin, {
itemsPerPage: 2
});
Next you can add a simple helper view to display the page numbers as li tags
PersonApp.PaginationView = Ember.View.extend({
templateName: 'pagination',
tagName: 'li',
page: function() {
return Ember.Object.create({id: this.get('content.page_id')});
}.property()
});
Your routes might look something like this (nested page under the 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();
}
});
And finally, you need to add some html to display it
<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>
Here is a full working project with this in action if you want to see it work
https://github.com/toranb/ember-pagination-example
这篇关于Ember 分页完整示例的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆