На нашем последнем занятии мы создали представление для управления существующими записями в блоге и рассмотрели идею маршрутизатора. Теперь пришло время создать функцию редактирования.
1. Создайте и визуализируйте EditBlogView
Чтобы построить функцию редактирования, давайте сначала EditBlogView . Опять же, это должно быть очень легко для вас сейчас. Мы прошли долгий путь вместе.
Шаг 1: HTML-шаблон
Эта часть очень похожа на шаблон AddBlogView . Единственная реальная разница в том, что, поскольку мы редактируем блог, нам нужно передать существующий заголовок и контент.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<script type=»text/template» id=»edit-tpl»>
<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 . В целях данного урока мы сосредоточены на том, как заставить его работать в первую очередь. На следующем занятии мы выполним всю работу по очистке и удалим дублирующийся код. Потерпи пока.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
EditBlogView = Parse.View.extend({
template: Handlebars.compile($(‘#edit-tpl’).html()),
events: {
‘submit .form-edit’: ‘submit’
},
submit: function(e) {
e.preventDefault();
// We will write the submit function later
},
render: function(){
var attributes = this.model.toJSON();
this.$el.html(this.template(attributes));
}
})
|
На этот раз мы не собираемся сначала проверять и убедиться, что эта часть кода работает — в идеале вы сделали это достаточно раз, чтобы вам было удобно двигаться дальше. Всегда проверяйте предыдущие сессии или оставляйте мне комментарии, если вы чувствуете, что застряли.
2. Ссылка на / редактировать страницу с маршрутизатором
Теперь давайте удостоверимся, что /edit/ будет ссылаться и отображать правильный вид редактирования.
Шаг 1: / edit /: id
В прошлый раз мы уже сделали часть подготовки. У нас есть шаблон URL для страницы /edit в BlogRouter.routes :
|
1
2
3
4
5
6
|
routes: {
‘admin’: ‘admin’,
‘login’: ‘login’,
‘add’: ‘add’,
‘edit/:url’: ‘edit’
}
|
Как вы можете видеть, шаблон URL уже указывает на BlogRouter.edit() , в которой у нас есть небольшая функция-заполнитель, которая принимает входной параметр url:
|
1
|
edit: function(url) {}
|
Это означает, что если вы посетите http: // localhost / your-directory / edit / what-ever-you-put-here , будет BlogRouter.edit() функция BlogRouter.edit() , а переменная url внутри этой функции получит значение из what-ever-you-put-here .
Итак, что же проще всего добавить после /edit что поможет нам найти именно тот пост в блоге, который мы хотим отредактировать? Это должен быть id , верно? Давайте немного изменим код, чтобы было ясно, что мы разместим там id .
|
01
02
03
04
05
06
07
08
09
10
|
routes: {
‘admin’: ‘admin’,
‘login’: ‘login’,
‘add’: ‘add’,
‘edit/:id’: ‘edit’
},
…
edit: function(id) {}
|
Шаг 2: Получить блог по его идентификатору
Теперь, когда мы получили id из URL, нам нужно найти этот конкретный блог с этим id . Способ сделать это в Parse.js — использовать запрос:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
edit: function(id) {
// First, you need to define a new query and tell it which table should it go for
var query = new Parse.Query(Blog);
// If you are looking for object by their id,
// just pass the id as the first parameter in .get() function
query.get(id, {
success: function(blog) {
// If the blog was retrieved successfully.
},
error: function(blog, error) {
// If the blog was not retrieved successfully.
}
});
}
|
Если вы хотите узнать больше о запросах Parse, проверьте их документацию .
Шаг 3: Рендеринг editBlogView
Давайте продолжим завершать функции success и error в обратном вызове запроса.
Для функции success мы хотим визуализировать editBlogView используя этот пост в качестве модели:
|
1
2
3
4
5
|
success: function(blog) {
var editBlogView = new EditBlogView({ model: blog });
editBlogView.render();
$(‘.main-container’).html(editBlogView.el);
}
|
А для функции error давайте просто зарегистрируем ошибку как обычно:
|
1
2
3
|
error: function(blog, error) {
console.log(error);
}
|
Шаг 4: Ссылка на страницу редактирования
Продолжим, давайте обновим ссылки на редактирование в #blogs-admin-tpl чтобы они действительно ссылались на /edit страницы. Давайте также дадим ему уникальный класс, потому что мы будем ссылаться на него:
|
1
|
<a class=»app-link app-edit» href=»edit/{{objectId}}»>Edit</a> |
|
И чтобы убедиться, что маршрутизатор получает изменение URL-адреса (поскольку он еще не статичен), давайте напишем нашу собственную функцию ссылки, которая заменит функцию по умолчанию в BlogAdminView .
Сначала добавьте событие для нажатия .app-edit . Вот почему нам нужен был класс раньше!
|
1
2
3
|
events: {
‘click .app-edit’: ‘edit’
}
|
Затем в функции edit() предотвратите действие по умолчанию, получите значение href и используйте blogRouter.navigate() для его запуска.
|
1
2
3
4
5
|
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() для сохранения наших правок.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
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() функцию .submit() для модели (которая ссылается на текущий пост в блоге, представленный в виде редактирования). Опять же, очень похоже на то, что в AddBlogView :
|
1
2
3
4
5
|
submit: function(e) {
e.preventDefault();
var data = $(e.target).serializeArray();
this.model.update(data[0].value, $(‘textarea’).val());
}
|
Попробуйте, и это должно работать!
Если вы уже следовали этому уроку, действительно, молодец.
4. Бонус: читаемый URL
Если вам не нравится видеть идентификатор в URL, и вы хотите, чтобы он был похож на /edit/your-blog-title/ , вы также можете сделать это довольно легко.
Просто добавьте новый url поля в сообщения блога и добавьте его в .create() :
|
1
2
3
|
‘url’: title.toLowerCase()
.replace(/[^\w ]+/g,»)
.replace(/ +/g,’-‘)
|
А в BlogRouter.edit() запрашивайте сообщения в блогах по их значению url :
|
1
2
3
4
5
6
7
|
query.equalTo(«url», url).find().then(function(blogs) {
// This query will return all the qualifying blogs in an array
// So just get the first one
// If you want to learn more, check out Parse.js’s doc
var blog = blogs[0];
…
});
|
Я не буду давать весь код здесь, потому что я думаю, что вы можете собрать его вместе сейчас!
Вывод
Теперь все должно собраться вместе для вас. Вы уже достигли огромного прогресса. В этом сеансе мы создали целую функцию редактирования для блога: от подготовки страницы до настройки маршрутизатора, а затем до обновления базы данных.
В следующий раз мы сделаем большую очистку в нашей кодовой базе. Теперь у нас есть много перекрывающегося кода здесь и там, потому что мы просто хотим убедиться, что мы можем построить функции для работы. В следующий раз вы объедините index.html и admin.html , .create() и .update() , AddBlogView и EditBlogView . Вы также научитесь создавать надежную структуру приложения с помощью Parse.js.
Что еще? Мы также вернемся к маршрутизатору, чтобы URL-адреса могли быть статическими (это означает, что вы можете добавить его в закладки, обновить страницу или отправить другу). Много хорошего впереди, так что следите за обновлениями!