在apis.py中定義一個Page類用于存儲分頁信息:
class Page(object): def __init__(self, item_count, page_index=1, page_size=10): self.item_count = item_count self.page_size = page_size self.page_count = item_count // page_size + (1 if item_count % page_size > 0 else 0) if (item_count == 0) or (page_index < 1) or (page_index > self.page_count): self.offset = 0 self.limit = 0 self.page_index = 1 else: self.page_index = page_index self.offset = self.page_size * (page_index - 1) self.limit = self.page_size self.has_next = self.page_index < self.page_count self.has_previous = self.page_index > 1
在urls.py中實現API:
def _get_blogs_by_page(): total = Blog.count_all() page = Page(total, _get_page_index()) blogs = Blog.find_by('order by created_at desc limit ?,?', page.offset, page.limit) return blogs, page @api @get('/api/blogs') def api_get_blogs(): blogs, page = _get_blogs_by_page() return dict(blogs=blogs, page=page)
返回模板頁面:
@view('manage_blog_list.html') @get('/manage/blogs') def manage_blogs(): return dict(page_index=_get_page_index(), user=ctx.request.user)
模板頁面首先通過API:GET /api/blogs?page=?拿到Model:
{ "page": { "has_next": true, "page_index": 1, "page_count": 2, "has_previous": false, "item_count": 12 }, "blogs": [...] }
然后,通過Vue初始化MVVM:
《script》 function initVM(data) { $('#p-blogs').show(); var vm = new Vue({ el: '#p-blogs', data: { blogs: data.blogs, page: data.page }, methods: { previous: function () { gotoPage(this.page.page_index - 1); }, next: function () { gotoPage(this.page.page_index + 1); }, edit_blog: function (blog) { location.assign('/manage/blogs/edit/' + blog.id); } } }); } $(function() { getApi('/api/blogs?page={{ page_index }}', function (err, results) { if (err) { return showError(err); } $('#p-loading').hide(); initVM(results); }); }); 《script》
View的容器是#p-blogs,包含一個table,我們用v-repeat可以把Model的數組blogs直接變成多行的
標題 / 摘要 | 作者 | 創建時間 | 操作 |
---|---|---|---|
往Model的blogs數組中增加一個Blog元素,table就神奇地增加了一行;把blogs數組的某個元素刪除,table就神奇地減少了一行。所有復雜的Model-View的映射邏輯全部由MVVM框架完成,我們只需要在HTML中寫上v-repeat指令,就什么都不用管了。
可以把v-repeat="blog: blogs"看成循環代碼,所以,可以在一個
完整的Blog列表頁如下: