在上一屆會(huì)議中，您重構(gòu)了整個(gè)博客系統(tǒng)。現(xiàn)在一切都已清理干凈，您已準(zhǔn)備好加速進(jìn)行一些新的冒險(xiǎn)。在本次會(huì)議中，我們將圍繞路由器做更多的事情，并向我們的博客系統(tǒng)添加三個(gè)功能：刪除、注銷和單個(gè)博客視圖。
1。刪除
在第 6 部分中，我們介紹了編輯功能。您很可能還想刪除您的一篇博客文章。有兩個(gè)地方可以放置此函數(shù)：將其添加到 BlogsAdminView 中，或者將其發(fā)送到 URL 并在 Router 中處理。
我將向您展示路由器的方式。它更常用，并且使代碼更加結(jié)構(gòu)化。
第 1 步：添加 URL 模式
像往常一樣，我們先添加一個(gè) URL 模式：
routes: {
'': 'index',
'admin': 'admin',
'login': 'login',
'add': 'add',
'edit/:id': 'edit',
'del/:id': 'del'
}
登錄后復(fù)制
第 2 步：刪除鏈接
然后，更新管理頁面中的鏈接：
Delete
登錄后復(fù)制
第 3 步：del 函數(shù)
現(xiàn)在，讓我們向 Router 添加一個(gè)新的 del 函數(shù)來處理它。這非常簡單：使用我們從 URL 傳入的 id 找到博客文章，并將其銷毀。
嘗試挑戰(zhàn)自己，在不閱讀我的代碼的情況下編寫它。此時(shí)您應(yīng)該已經(jīng)很好地掌握了 Parse.js。
del: function(id) {
var query = new Parse.Query(Blog);
query.get(id).then(function(blog){
blog.destroy().then(function(blog){
alert('Deleted!');
})
});
}
登錄后復(fù)制
請(qǐng)注意，您可以在此處使用 .then() 函數(shù)，而不是像我們之前那樣傳遞對(duì)象：
query.get(id, {
success: function(blog) {
...
},
error: function(blog, error) {
...
}
});
登錄后復(fù)制
這是在 Parse.js 中添加回調(diào)函數(shù)的簡單方法，使您的代碼更干凈、更具可讀性。請(qǐng)?jiān)L問 Parse.com 查看有關(guān) Promise 的完整文檔。
讓我們對(duì)其進(jìn)行測(cè)試運(yùn)行，并仔細(xì)檢查數(shù)據(jù)庫以查看它是否正常工作。
恭喜，它正在工作！
第 4 步：重定向回管理頁面
如果你注意一下URL，你會(huì)發(fā)現(xiàn)，點(diǎn)擊掉警告框后，URL仍然是/del/，而你剛剛刪除的帖子仍然存在。我們希望在刪除后將用戶發(fā)送回管理頁面，并且該頁面應(yīng)該刷新并反映他們剛剛所做的更改。
您可以通過重定向來實(shí)現(xiàn)所有這些：
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 });
})
});
}
登錄后復(fù)制
請(qǐng)注意，因?yàn)檫@次您從路由器內(nèi)部調(diào)用 navigate，所以您可以將路由器存儲(chǔ)為 self，然后調(diào)用 self.navigate()。
第 5 步：檢查登錄
最后，我們需要確保您是唯一可以刪除您的博客帖子的人。讓我們檢查一下該功能的登錄。這應(yīng)該與 edit 函數(shù)相同。
del: function(id) {
if (!Parse.User.current()) {
this.navigate('#/login', { trigger: true });
} else {
...
}
}
登錄后復(fù)制
2。注銷
與刪除一樣，注銷也可以由路由器處理。它還從添加 URL 模式開始：
routes: {
...
'logout': 'logout'
},
登錄后復(fù)制
Parse.js 中的注銷功能本身非常簡單。只需調(diào)用 Parse.User.logOut() ，然后重定向到 /login 頁面：
logout: function () {
Parse.User.logOut();
this.navigate('#/login', { trigger: true });
}
登錄后復(fù)制
最后，讓我們向 #admin-tpl 添加一個(gè)按鈕：
Logout
登錄后復(fù)制
如您所見，樣式確實(shí)不是本教程的重點(diǎn)。您可以隨意修復(fù)填充并根據(jù)需要設(shè)置樣式。
3。單個(gè)博客視圖
現(xiàn)在讓我們繼續(xù)開發(fā)一些新功能。
到目前為止，我們正在主頁上顯示整篇博客文章。雖然有些人確實(shí)喜歡這種風(fēng)格，但大多數(shù)博客系統(tǒng)都支持預(yù)先提供片段摘要的想法，如果訪問者點(diǎn)擊文章，他們就可以在單獨(dú)的頁面上看到內(nèi)容，周圍可能還有一些評(píng)論區(qū)域。
我將在本次會(huì)議中引導(dǎo)您創(chuàng)建這個(gè)詳細(xì)的單一博客視圖，我們將在下一次會(huì)議中重點(diǎn)關(guān)注構(gòu)建評(píng)論。
第 1 步：添加摘要列
首先，我們?cè)诓┛捅碇刑砑右涣凶鳛檎?/p>
第 2 步：在 WriteBlogView 中包含摘要
現(xiàn)在，讓我們將其添加到 Blog.update() 函數(shù)中。您可以更改該函數(shù)以獲取包含標(biāo)題、摘要和內(nèi)容的數(shù)據(jù)對(duì)象，以避免記住變量的順序。
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, {
...
});
}
登錄后復(fù)制
在#write-tpl中再添加一個(gè)<textarea>作為摘要：
// Put this form-group in between the form-group for title and content
Summary
{{summary}}
登錄后復(fù)制
并相應(yīng)地更改 WriteBlogView.submit() 函數(shù)：
submit: function(e) {
...
this.model.update({
title: data[0].value,
summary: data[1].value,
content: data[2].value
});
}
登錄后復(fù)制
現(xiàn)在，由于我們?cè)谀０逯刑砑恿艘粋€(gè)新變量，因此我們需要在 WriteBlogView.render() 函數(shù)中為其指定一個(gè)默認(rèn)的空值：
render: function(){
...
if (this.model) {
...
} else {
attributes = {
form_title: 'Add a Blog',
title: '',
summary: '',
content: ''
}
}
...
}
登錄后復(fù)制
如果您對(duì)內(nèi)容使用 wysihtml5 插件，您會(huì)注意到之前我們的目標(biāo)是所有 <textarea> 元素：
this.$el.html(this.template(attributes)).find('textarea').wysihtml5();
登錄后復(fù)制
讓我們?yōu)閮?nèi)容文本區(qū)域指定一個(gè)類，并僅使用 wysihtml5 插件來定位該類。
在#write-tpl中：
{{{content}}}
登錄后復(fù)制
在WriteBlogView.render()函數(shù)中：
this.$el.html(this.template(attributes)).find('.write-content').wysihtml5();
登錄后復(fù)制
現(xiàn)在可以使用了！
第 3 步：在主頁上顯示摘要
使用新的撰寫博客頁面并添加一些帶有摘要的博客文章，并提取摘要而不是#blogs-tpl中的內(nèi)容：
{{#each blog}}
{{title}}
At {{time}} by {{authorName}}
{{summary}}
{{/each}}
登錄后復(fù)制登錄后復(fù)制
第 4 步：添加 SingleBlogView 頁面
花一點(diǎn)時(shí)間考慮一下如何添加 /blog/:id 頁面來顯示每篇博客文章的內(nèi)容，并嘗試自己完成。您現(xiàn)在應(yīng)該能夠自己完成這一切了！
但為了本教程的目的，讓我給您快速演練：
為此頁面添加新的 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>
登錄后復(fù)制
添加一個(gè)新的 BlogView 類，該類接受 blog 對(duì)象，并將其呈現(xiàn)在 #blog-tpl 中：
BlogView = Parse.View.extend({
template: Handlebars.compile($('#blog-tpl').html()),
render: function() {
var attributes = this.model.toJSON();
this.$el.html(this.template(attributes));
}
}),
登錄后復(fù)制
在 BlogRouter 中添加新的 URL 模式：
routes: {
...
'blog/:id': 'blog',
...
}
登錄后復(fù)制
并在 BlogRouter.blog() 函數(shù)中，通過 id 獲取博客，渲染一個(gè) 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);
}
});
}
登錄后復(fù)制
最后，更新#blogs-tpl中的鏈接以鏈接到此頁面：
{{#each blog}}
{{title}}
At {{time}} by {{authorName}}
{{summary}}
{{/each}}
登錄后復(fù)制登錄后復(fù)制
嘗試一下：
如果您自己完成此操作，可加分。
結(jié)論
在本次會(huì)議中，您構(gòu)建了很多內(nèi)容：刪除功能、注銷功能和另一種新頁面類型。如果您到目前為止一直在關(guān)注本教程系列，我認(rèn)為您對(duì)數(shù)據(jù)庫、模型、視圖、模板和路由器如何協(xié)同工作有深入的了解。我希望您現(xiàn)在也開始喜歡構(gòu)建 Parse.js 項(xiàng)目。請(qǐng)留下您的反饋并告訴我是否有幫助。
通過我們這次構(gòu)建的這個(gè)單一博客文章頁面，我們下次將添加評(píng)論部分。應(yīng)該是一件有趣的事。敬請(qǐng)關(guān)注！
以上就是開始使用 Parse.js 創(chuàng)建博客：刪除、注銷和查看個(gè)人博客文章的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
