如何在emberjs中使用幻影假数据进行分页
how to do pagination using mirage fake data in emberjs?
我正在使用mirage创建假数据。
场景/default.js
export default function(server) {
server.createList('product', 48);
server.loadFixtures();
}
上面我正在创建48个产品,从控制器我调用
this.store.query('product', {
filter: {
limit: 10,
offset: 0
}
}).then((result) => {
console.log(result);
});
以及mirage/config.js
this.get('/products', function(db) {
let products = db.products;
return {
data: products.map(attrs => ({
type: 'product',
id: attrs.id,
attributes: attrs
}))
};
});
现在我的问题是,如何每页加载10个产品?我发送过滤器10,因为页面大小和偏移量意味着页面编号。
为了只加载有限的产品,应该对config.js进行哪些更改?
在mirage/config.js:中的处理程序中
this.get('/products', function(db) {
let images = db.images;
return {
data: images.map(attrs => ({
type: 'product',
id: attrs.id,
attributes: attrs
}))
};
});
您可以访问请求对象,如下所示:
this.get('/products', function(db, request) {
let images = db.images;
//use request to limit images here
return {
data: images.map(attrs => ({
type: 'product',
id: attrs.id,
attributes: attrs
}))
};
});
请看一下这个傻瓜的完整例子。其中这个旋转有以下内容:
this.get('tasks',function(schema, request){
let qp = request.queryParams
let page = parseInt(qp.page)
let limit = parseInt(qp.limit)
let start = page * limit
let end = start + limit
let filtered = tasks.slice(start,end)
return {
data: filtered
}
})
你只需要这样调整它就可以了:
this.get('products',function(db, request){
let qp = request.queryParams
let offset = parseInt(qp.offset)
let limit = parseInt(qp.limit)
let start = offset * limit
let end = start + limit
let images = db.images.slice(start,end)
return {
data: images.map(attrs => ({
type: 'product',
id: attrs.id,
attributes: attrs
}))
}
})
todos
的一个示例,您可以将其调整为适合您自己的用例。
// Fetch all todos
this.get("/todos", (schema, request) => {
const {queryParams: { pageOffset, pageSize }} = request
const todos = schema.db.todos;
if (Number(pageSize)) {
const start = Number(pageSize) * Number(pageOffset)
const end = start + Number(pageSize)
const page = todos.slice(start, end)
return {
items: page,
nextPage: todos.length > end ? Number(pageOffset) + 1 : undefined,
}
}
return todos
});
相关文章:
- 如何在emberjs中使用幻影假数据进行分页
- 如何在分页事件中突出显示数据表中的单词
- 数据表不显示与表的分页
- 如何使用引导程序分页器库对从PHP返回的数据进行分页
- 如何使用javascript检测数据表分页的其他页面中的复选框
- 我应该将哪些数据传递给 Spotify 应用程序才能使分页工作
- jQuery 数据表 在页面上导航时,在分页表上重置行的数据
- 如何在 PHP 中使用 OnChange 事件的下拉列表中选择一个选项后,对大量数据行设置分页
- JSF数据表分页中的当前页码
- 如何使用数据表进行客户端和服务器端的混合分页,以便对前X行进行客户端分页
- 数据表中的FixedHead没有'删除分页后无法工作
- 使用数据寻呼机在 asp.net 分页 - 下一个,上一个按钮
- 打印包含1页以上的表数据时,如何在浏览器打印中添加分页符
- 谷歌图表与动态数据和分页是可能的
- 如何使用php对mysql数据库中检索到的数据进行分页
- 当uib分页被包装在另一个指令中时,AngularJS表数据没有更新
- 为什么分页数据表JQuery没有'不要使用JSF ui:重复
- 数据表jquery分页和colreorder
- 不能在MVC5中使用存储过程进行数据分页
- AngularJS数据分页/无限滚动