在上一屆會議中,您重構了整個部落格系統。現在一切都已清理乾淨,您已準備好加速進行一些新的冒險。在本次會議中,我們將圍繞路由器做更多的事情,並在我們的部落格系統中添加三個功能:刪除、登出和單一部落格視圖。
在第 6 部分中,我們介紹了編輯功能。您很可能還想刪除您的一篇部落格文章。有兩個地方可以放置此函數:將其新增至 BlogsAdminView
中,或將其傳送至 URL 並在 Router
中處理。
我將向您展示路由器的方式。它更常用,並且使程式碼更加結構化。
像往常一樣,我們先加入一個 URL 模式:
routes: { '': 'index', 'admin': 'admin', 'login': 'login', 'add': 'add', 'edit/:id': 'edit', 'del/:id': 'del' }
然後,更新管理頁面中的連結:
Delete
現在,讓我們為 Router 新增一個新的 del
函數來處理它。這非常簡單:使用我們從 URL 傳入的 id
找到部落格文章,並將其銷毀。
嘗試挑戰自己,在不閱讀我的程式碼的情況下編寫它。此時您應該已經很好地掌握了 Parse.js。
del: function(id) { var query = new Parse.Query(Blog); query.get(id).then(function(blog){ blog.destroy().then(function(blog){ alert('Deleted!'); }) }); }
請注意,您可以在此處使用 .then()
函數,而不是像我們之前那樣傳遞物件:
query.get(id, { success: function(blog) { ... }, error: function(blog, error) { ... } });
這是在 Parse.js 中加入回呼函數的簡單方法,使您的程式碼更乾淨、更具可讀性。請造訪 Parse.com 查看有關 Promise 的完整文件。
讓我們對其進行測試運行,並仔細檢查資料庫以查看它是否正常工作。
#恭喜,它正在工作!
如果你注意一下URL,你會發現,點擊掉警告框後,URL仍然是/del/
,而你剛剛刪除的貼文仍然存在。我們希望在刪除後將用戶發送回管理頁面,並且該頁面應該刷新並反映他們剛剛所做的更改。
您可以透過重定向來實現所有這些:
del: function(id) { var self = this, query = new Parse.Query(Blog); query.get(id).then(function(blog){ blog.destroy().then(function(blog){ self.navigate('admin', { trigger: true }); }) }); }
請注意,因為這次您從路由器內部呼叫navigate
,所以您可以將路由器儲存為self
,然後呼叫self.navigate()
。
最後,我們需要確保您是唯一可以刪除您的部落格貼文的人。讓我們檢查一下該功能的登入。這應該與 edit
函數相同。
del: function(id) { if (!Parse.User.current()) { this.navigate('#/login', { trigger: true }); } else { ... } }
與刪除一樣,登出也可以由路由器處理。它也從新增 URL 模式開始:
routes: { ... 'logout': 'logout' },
Parse.js 中的登出功能本身就非常簡單。只要呼叫 Parse.User.logOut()
,然後重定向到 /login
頁面:
logout: function () { Parse.User.logOut(); this.navigate('#/login', { trigger: true }); }
最後,讓我們為 #admin-tpl
新增一個按鈕:
Logout#
如您所見,樣式確實不是本教學的重點。您可以隨意修復填滿並根據需要設定樣式。
現在讓我們繼續開發一些新功能。
到目前為止,我們正在主頁上顯示整篇部落格文章。雖然有些人確實喜歡這種風格,但大多數部落格系統都支持預先提供片段摘要的想法,如果訪客點擊文章,他們就可以在單獨的頁面上看到內容,周圍可能還有一些評論區域。
我將在本次會議中引導您建立這個詳細的單一部落格視圖,我們將在下一次會議中專注於建立評論。
首先,我們在部落格表中新增一列作為摘要:
#現在,讓我們將其加入到 Blog.update()
函數中。您可以變更函數以取得包含標題、摘要和內容的資料對象,以避免記住變數的順序。
update: function(data) { // Only set ACL if the blog doesn't have it ... this.set({ 'title': data.title, 'summary': data.summary, 'content': data.content, ... }).save(null, { ... }); }
在#write-tpl
中再加入一個4750256ae76b6b9d804861d8f69e79d3
作為摘要:
// Put this form-group in between the form-group for title and content Summary {{summary}}
并相应地更改 WriteBlogView.submit()
函数:
submit: function(e) { ... this.model.update({ title: data[0].value, summary: data[1].value, content: data[2].value }); }
现在,由于我们在模板中添加了一个新变量,因此我们需要在 WriteBlogView.render()
函数中为其指定一个默认的空值:
render: function(){ ... if (this.model) { ... } else { attributes = { form_title: 'Add a Blog', title: '', summary: '', content: '' } } ... }
如果您对内容使用 wysihtml5 插件,您会注意到之前我们的目标是所有 4750256ae76b6b9d804861d8f69e79d3
元素:
this.$el.html(this.template(attributes)).find('textarea').wysihtml5();
让我们为内容文本区域指定一个类,并仅使用 wysihtml5 插件来定位该类。
在#write-tpl
中:
{{{content}}}
在WriteBlogView.render()
函数中:
this.$el.html(this.template(attributes)).find('.write-content').wysihtml5();
现在可以使用了!
使用新的撰写博客页面并添加一些带有摘要的博客文章,并提取摘要而不是#blogs-tpl
中的内容:
{{#each blog}} {{title}} At {{time}} by {{authorName}} {{summary}} {{/each}}
花一点时间考虑一下如何添加 /blog/:id
页面来显示每篇博客文章的内容,并尝试自己完成。您现在应该能够自己完成这一切了!
但为了本教程的目的,让我给您快速演练:
为此页面添加新的 HTML 模板:
<div class="blog-post"> <h2 class="blog-post-title">{{title}}</h2> <p class="blog-post-meta">At {{time}} by {{authorName}}</p> <div>{{{content}}}</div> </div>
添加一个新的 BlogView
类,该类接受 blog
对象,并将其呈现在 #blog-tpl
中: p>
BlogView = Parse.View.extend({ template: Handlebars.compile($('#blog-tpl').html()), render: function() { var attributes = this.model.toJSON(); this.$el.html(this.template(attributes)); } }),
在 BlogRouter
中添加新的 URL 模式:
routes: { ... 'blog/:id': 'blog', ... }
并在 BlogRouter.blog()
函数中,通过 id 获取博客,渲染一个 blogView
,并将其放入 $container
:
blog: function(id) { var query = new Parse.Query(Blog); query.get(id, { success: function(blog) { console.log(blog); var blogView = new BlogView({ model: blog }); blogView.render(); $container.html(blogView.el); }, error: function(blog, error) { console.log(error); } }); }
最后,更新#blogs-tpl
中的链接以链接到此页面:
{{#each blog}} {{title}} At {{time}} by {{authorName}} {{summary}} {{/each}}
尝试一下:
如果您自己完成此操作,可加分。
在本次会议中,您构建了很多内容:删除功能、注销功能和另一种新页面类型。如果您到目前为止一直在关注本教程系列,我认为您对数据库、模型、视图、模板和路由器如何协同工作有深入的了解。我希望您现在也开始喜欢构建 Parse.js 项目。请留下您的反馈并告诉我是否有帮助。
通过我们这次构建的这个单一博客文章页面,我们下次将添加评论部分。应该是一件有趣的事。敬请关注!40587128eee8df8f03d0b607fe98301440587128eee8df8f03d0b607fe983014
以上是開始使用 Parse.js 建立部落格:刪除、登出和查看個人部落格文章的詳細內容。更多資訊請關注PHP中文網其他相關文章!