####Попередні уроки:
-
Створюємо власний блог з допомогою Parse.js: Працюємо з даними
-
Створюємо власний блог з допомогою Parse.js: Авторизація користувачів
-
Створюємо власний блог з допомогою Parse.js, частина 4: Додаємо новий блог
-
Створюємо власний блог з допомогою Parse.js, частина 5: Router (Маршрутизація)
Минулого разу ми створили подання (view) для управління існуючими блогами і розглянули основні ідеї маршрутизації (routing). Тепер, прийшов час для створення функції редагування.
1. Створити і візуалізувати EditBlogView
Для побудови функції редагування, давайте спочатку створимо EditBlogView
. Якщо ви слідкуєте за всією серією уроків, це має бути дуже легким для вас. Ми пройшли довгий шлях разом :)
Крок 1: HTML-шаблон
Ця частина дуже схожа на шаблон AddBlogView
. Єдина відмінність полягає в тому, що, оскільки ми редагуємо блог, нам потрібно передати існуючу назву і зміст.
<script id="edit-tpl" type="text/template">
<h2>Edit Blog</h2>
<form class="form-edit" role="form">
<div class="form-group">
<label for="title">Title</label>
<input name="title" type="text" class="form-control" id="title" value="{{title}}"></input>
</div>
<div class="form-group">
<label for="content">Content</label>
<textarea name="content" class="form-control" rows="20">{{{content}}}</textarea>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Submit</button>
</form>
</script>
Крок 2: EditBlogView
Тепер EditBlogView
. Знову ж таки, це дуже схоже на AddBlogView
. Основною метою цього уроку є змусити його працювати. Наступного разу ми будемо робити все "прибирання" і видалення повторюваного коду.
EditBlogView = Parse.View.extend({
template: Handlebars.compile($('#edit-tpl').html()),
events: {
'submit .form-edit': 'submit'
},
submit: function(e) {
e.preventDefault();
// Ми напишемо функцію надсилання пізніше
},
render: function(){
var attributes = this.model.toJSON();
this.$el.html(this.template(attributes));
}
})
Ми не будемо перевіряти роботу цієї частини коду - ми робили це вже багато разів, так що ви можете спокійно рухатись далі.
2. Посилання на сторінку /edit за допомогою маршрутизатора
Тепер, давайте переконаємося, що посилання на /edit
завантажується і рендерить правильне подання редагування.
Крок 1: /edit/:id
Минулого разу ми вже зробили частину підготовки. У нас вже є URL шаблон для сторінки /edit
у BlogRouter.routes
:
routes: {
'admin': 'admin',
'login': 'login',
'add': 'add',
'edit/:url': 'edit'
}
Як ви можете бачити, URL шаблон вже вказує на функцію BlogRouter.edit()
, в якій у нас є маленький прототип функції, яка приймає в параметрі URL-адреси:
edit: function(url) {}
Це означає, що якщо ви відвідуєте http://localhost/your-directory/edit/what-ever-you-put-here
, BlogRouter.edit()
функція буде спрацьовувати, а змінна URL в цій функції одержить значення what-ever-you-put-here
.
Так ось, що найпростіше поставити після /edit
, щоб воно допомогло нам знайти потрібний пост у блозі, який ми хочемо змінити? Це має бути ідентифікатор, вірно? Давайте змінимо код трохи, щоб було зрозуміло, що ми збираємось використовувати саме ID.
routes: {
'admin': 'admin',
'login': 'login',
'add': 'add',
'edit/:id': 'edit'
},
...
edit: function(id) {}
Крок 2: отримати ID блогу
Тепер, коли ми отримали ідентифікатор URL, ми повинні знайти конкретний блог з таким ID. Ось спосіб зробити це в Parse.js за допомогою запиту:
edit: function(id) {
// По-перше, ви повинні визначити новий запит і повідомити йому, які таблиці повинні бути використані
var query = new Parse.Query(Blog);
// Якщо ви шукаєте об'єкт за його ID, просто передайте ідентифікатор в якості першого параметра функції .get()
// Просто передайте ідентифікатор в якості першого параметрафункції .get()
query.get(id, {
success: function(blog) {
// Якщо блог був успішно отриманий.
},
error: function(blog, error) {
// Якщо блог не був успішно отриманий.
}
});
}
Якщо ви хочете більше дізнатися про запити Parse, зверніться до документації.
Крок 3: рендер editBlogView
Давайте продовжимо, щоб закінчити з функціями success
і error
у callback-запиті.
Для функції success
, ми хочемо рендерити editBlogView
за допомогою блогу в якості моделі:
success: function(blog) {
var editBlogView = new EditBlogView({ model: blog });
editBlogView.render();
$('.main-container').html(editBlogView.el);
}
Для функції error
, просто лог помилки, як зазвичай:
error: function(blog, error) {
console.log(error);
}
Крок 4: посилання на сторінку /edit
Рухаючись далі, давайте оновимо edit-посилання в #blogs-admin-tpl
так, щоб вони посилались на сторінку /edit
. Давайте також надамо йому унікальний клас, так як ми будемо на нього посилатися:
<a class="app-link app-edit" href="edit/{{objectId}}">Edit</a> |
І щоб переконатися, що маршрутизатор отримує зміни URL-адреси (тому що вона поки що не статична), давайте напишемо нашу власну Link-функцію для заміни стандартної адреси в BlogAdminView
.
По-перше, додамо подію натискання .app-edit
. Ось чому нам потрібен був клас!
events: {
'click .app-edit': 'edit'
}
Потім, у Edit()
функції запобігнемо діям за замовчуванням, отримуємо значення href і використаємо blogRouter.navigate()
, щоб викликати його.
edit: function(e){
e.preventDefault();
var href = $(e.target).attr('href');
blogRouter.navigate(href, { trigger: true });
}
Тепер ми можемо перевірити її:
Тестування може бути трохи незручним в цей момент, тому що маршрутизатор не повністю визначено. Просто зайдіть на http://localhost/your-directory/admin.html
у якості відправної точки при кожному оновленні. Ми подбаємо про це в наступній сесії.
3. Підтвердження (відправка) змін у блозі
Ще трохи і ця сторінка буде функціонувати. Ми просто повинні зробити так, щоб функція EditBlogView.submit()
працювала.
Крок 1: Blog.update()
Так само, як ми створили функції Blog.create()
для додавання нового блогу, тепер нам потрібно створити функцію Blog.update()
, для збереження наших змін.
update: function(title, content) {
this.set({
'title': title,
'content': content
}).save(null, {
success: function(blog) {
alert('Your blog ' + blog.get('title') + ' has been saved!');
},
error: function(blog, error) {
console.log(blog);
console.log(error);
}
});
}
Як ви можете бачити, це дуже схоже на функцію .create()
, але замість створення та збереження нового блогу, ви встановите значення на поточний об'єкт, а потім зберігаєте його.
Крок 2: EditBlogView.submit()
Тепер давайте отримаємо дані з форми у EditBlogView
і викличемо функцію .submit()
для моделі (яка відноситься до поточного блогу, який відображається в режимі редагування). Знову ж таки, дуже схоже на AddBlogView
:
submit: function(e) {
e.preventDefault();
var data = $(e.target).serializeArray();
this.model.update(data[0].value, $('textarea').val());
}
Спробуйте, все повинно працювати!
4. Бонус: Зрозуміла URL-адреса
Якщо вам не подобається бачити ID в URL, і ви хочете, щоб він був схожим на /edit/your-blog-title/
, ви можете зробити це досить легко.
Просто додайте нове поле url
до вашого блогу і додайте його в файл функції .create():
'url': title.toLowerCase()
.replace(/[^\\w ]+/g,'')
.replace(/ +/g,'-')
І в BlogRouter.edit()
відсортуйте записи блогу за їх URL значеннями:
query.equalTo("url", url).find().then(function(blogs) {
// Цей запит поверне всі відповідні блоги в масив
// Просто отримайте перший
// Якщо ви хочете дізнатися більше, ознайомтесь з документацією Parse.js
var blog = blogs[0];
...
});
Я не буду викладати весь код, впевнений, що ви самостійно зможете об'єднати його!
Висновок
Цього разу ми створили функціонал редагування для блогу: від підготовки сторінки до налаштування маршрутизатора та оновлення бази даних.
Наступного разу, ми зробимо чистку нашого коду. Зараз у нас багато дублювання тут і там, тому що ми просто хочемо переконатися, що ми можемо побудувати працюючі функції. В наступному уроці, ви будете об'єднувати index.html
і admin.html
, .create()
і .update()
, AddBlogView
і EditBlogView
. Ви також дізнаєтеся, як створити міцну структуру програми з Parse.js.
Що ще? Ми будемо повертатися до маршрутизатора, так щоб URL-адреси бути статичними (що означає, що ви зможете додати в обране, оновити сторінку, або відправити посилання іншим людям). Багато гарних речей, тож слідкуйте за оновленнями!
Ще немає коментарів