Попередні уроки:
-
Створюємо власний блог з допомогою Parse.js: Працюємо з даними
-
Створюємо власний блог з допомогою Parse.js: Авторизація користувачів
-
Створюємо власний блог з допомогою Parse.js, частина 4: Додаємо новий блог
В останньому уроці, ми створили функцію "Додати новий блог" , і тепер користувачі можуть створювати пост в системі блогу. Логічним продовженням було б дати можливість користувачам змінювати і видаляти існуючі блоги. Цього разу, ми збираємося побудувати певну основу для цих функцій, зробити список блогів в адмінці сторінки і додати маршрутизатор (якщо ви не знаєте, що таке маршрутизатор, ця стаття для вас).
1. Створення і візуалізація BlogsAdminView
Крок 1: HTML-шаблон
Як завжди, почнемо, додавши HTML-шаблон для admin.html. Це має бути досить легко для вас, схоже на #blogs-tpl в index.html. Різниця лише в тому, що ми робимо таблицю цього разу:
<script id="blogs-admin-tpl" type="text/x-handlebars-template">
<table>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Time</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{{#each blog}}
<tr>
<td><a class="app-link" href="#">{{title}}</a></td>
<td>{{authorName}}</td>
<td>{{time}}</td>
<td>
<a class="app-link" href="#">Edit</a> |
<a class="app-link" href="#">Delete</a>
</td>
</tr>
{{/each}}
</tbody>
</table>
</script><b>
</b>
Крок 2: Створення класу BlogsAdminView
Аналогічним чином створіть BlogsAdminView в admin.js. Якщо ви не знаєте як це зробити, я рекомендую вам переглянути попередні статті.
var Blogs = Parse.Collection.extend({
model: Blog
}),
BlogsAdminView = Parse.View.extend({
template: Handlebars.compile($('#blogs-admin-tpl').html()),
render: function() {
var collection = { blog: this.collection.toJSON() };
this.$el.html(this.template(collection));
}
});
Крок 3: Рендеринг BlogsAdminView
Щоб побачити весь список, потрібно візуалізувати його. Давайте додамо його у функцію render() в WelcomeView:
render: function() {
var attributes = this.model.toJSON();
this.$el.html(this.template(attributes));
var blogs = new Blogs();
blogs.fetch({
success: function(blogs) {
var blogsAdminView = new BlogsAdminView({ collection: blogs });
blogsAdminView.render();
$('.main-container').append(blogsAdminView.el);
},
error: function(blogs, error) {
console.log(error);
}
});
}
Перевірте адмін. розділ, ви побачите список під кнопкою "Add a New Blog".
Маршрутизатор
Сподіваюся, що тепер вам вже відомо як зручно писати і читати з бази даних. Також, ви повинні були освоїти створення і візуалізації даних, які ви отримуєте. Однак, ви може помітити, що в коді занадто багато функцій View.render(), через що наш код може бути нечитабельним та складним в підтримці. Крім того, присутність admin.html в URL теж є небажаною.
Думаючи про функцію редагування, яку ми збираємося створити, ми можемо побудувати її, додавши події і використовуючи їх в блозі, працюючи з ним як з об'єктом, після чого заново його рендерити. Але хіба не було б класно, якщо б ми могли мати щось на зразок http://AnExampleDomain.net/edit/id? Ідея роутингу допоможе нам досягти цього. Це спосіб прирівнювання функції до URL-адрес.
##Крок 1: Додавання структури маршрутизатора
Щоб допомогти вам вивчити цю концепцію, чому б нам просто не створити новий маршрутизатор в admin.js:
var BlogRouter = Parse.Router.extend({
// Тут ви можете визначити деякі глобальні змінні
initialize: function(options){
this.blogs = new Blogs();
},
// Це працює, коли ми запускаємо маршрутизатор. Залиште його поки що.
start: function(){
Parse.history.start({pushState: true}); },
// Це ми вказуємо URL-адресу для функції.
// Просто додайте '{{URL}}': '{{назву функції}}'
routes: {
'admin': 'admin',
'login': 'login',
'add': 'add',
'edit/:url': 'edit'
},
admin: function() {},
login: function() {},
add: function() {},
edit: function(url) {}
}),
blogRouter = new BlogRouter();
blogRouter.start();
Як ви можете бачити, зіставити URL-адресу та функцію в маршрутизаторі і запустити його доволі легко. Тепер, якщо користувач відвідує сторінку /admin, то він викличе функцію admin().
Зверніть увагу, що ви можете додавати параметри в URL, додавши двокрапку перед ім'ям змінної, подібно до edit/:url в коді вище.
Тепер давайте зробимо кілька кроків, щоб реорганізувати наш існуючий код в машрутизаторі.
Крок 2: сторінка /login
Найпростіше це буде зробити зі сторінкою входу /login. Просто перемістіть код рендеринга у функцію login():
login: function() {
var loginView = new LoginView();
loginView.render();
$('.main-container').html(loginView.el);
}
##Крок 3: сторінка /admin
Далі, давайте напишемо функцію для сторінки /admin. Раніше, коли користувачі відвідували /admin.html ми відправляли їх на екран входу в систему за замовчуванням. І якщо вони успішно увійшли, ми відправляли їх на екран привітання. Функція відтворення для WelcomeView була в успішному callback. Це не кращий спосіб організації коду, і це далеко не самий зручний варіант для користувача.
Так що тепер, давайте просто зробимо перевірку для сторінки /admin. Якщо користувач увійшов в систему, ми показуємо сторінку привітання, якщо ні - перенаправляємо на /login.
admin: function() {
// Визначення користувача в Parse
var currentUser = Parse.User.current();
if ( !currentUser ) {
// Url редірект в JS
blogRouter.navigate('login', { trigger: true });
} else {
var welcomeView = new WelcomeView({ model: currentUser });
welcomeView.render();
$('.main-container').html(welcomeView.el);
// Ми змінюємо його на this.blogs тож він зберігає контент для інших Views
// Не забудьте вказати в BlogRouter.initialize()
this.blogs.fetch({
success: function(blogs) {
var blogsAdminView = new BlogsAdminView({ collection: blogs });
blogsAdminView.render();
$('.main-container').append(blogsAdminView.el);
},
error: function(blogs, error) {
console.log(error);
}
});
}
}
Як ви можете бачити в коді, ми використовуємо функцію blogRouter.navigate() для перенаправлення на сторінку входу. Аналогічно, давайте змінимо функцію візуалізації в /login на blogRouter.navigate():
Parse.User.logIn(username, password, {
// Якщо логін та пароль співпадають
success: function(user) {
blogRouter.navigate('admin', { trigger: true });
},
// Якщо помилка
error: function(user, error) {
console.log(error);
}
});
Не забудьте видалити старі функції рендерингу в попередньому коді.
Крок 4: перевірка і встановлення навігації за замовчуванням в якості тимчасового рішення
Спробуємо ці дві функції. Тест і... нічого! Це тому, що ми повинні направити в /admin на початку; Сторінка admin.html саме по собі не відповідає ні одному шаблону URL, який ми встановили у маршрутизатор.
Давайте додамо перехід за замовчуванням до функції Start(), так щоб коли маршрутизатор запускався, він автоматично переводив користувача на сторінку /admin:
start: function(){
Parse.history.start({pushState: true});
this.navigate('admin', { trigger: true });
}
Тепер, якщо ви спробуєте, все повинно працювати правильно:
Зверніть увагу, що ви все ще не можете безпосередньо перейти /admin або /login. І якщо ви тримаєте свій проект в розділі каталогу, ви обов'язково помітите, що URL-адреса перенаправляється з http://localhost/directory/admin.html до http://localhost/admin і це здається дивним. Ми будемо охоплювати і вирішувати ці питання в майбутніх статтях. Сьогодні наша головна мета - зрозуміти, що таке маршрутизатор і як він працює, закласти певні основи.
Крок 5: сторінка /add
Тепер потрібно перенести рендеринг сторінки "Add a New Blog" з WelcomeView до маршрутизатора.
BlogRouter = Parse.Router.extend({
...
add: function() {
var addBlogView = new AddBlogView();
addBlogView.render();
$('.main-container').html(addBlogView.el);
},
...
})
Також ми можемо переписати подію в WelcomeView щоб просто спричинити перенаправлення:
WelcomeView = Parse.View.extend({
template: Handlebars.compile($('#welcome-tpl').html()),
events: {
'click .add-blog': 'add'
},
add: function(){
blogRouter.navigate('add', { trigger: true });
},
render: function(){
var attributes = this.model.toJSON();
this.$el.html(this.template(attributes));
}
})
Тепер перевірте і переконайтеся, що все працює.
Висновок
У цьому уроці, ми змінили перегляд списку блогів в адмінці, і ви дізналися про важливу концепцію маршрутизатора. Я сподіваюся, що тепер ви зможете самостійно створити і візуалізувати подання(views) з Parse.js. І що ви зрозуміли, як роутер може допомогти нам організувати і повторно використовувати наш код.
Ми не заглиблюватися в деталі механіки маршрутизатора, як, наприклад, розуміння того, чому ми повинні мати {trigger: true}. Як вже було згадано, метою цього уроку є показати вам, як ви можете змусити все це працювати. Але якщо ви зацікавлені в отриманні додаткової інформації, обов'язково перегляньте документацію. Ми також будемо розглядати маршрутизатор більш детально, коли він знадобиться нам у наступних статтях серії.
Наступного разу, ми збираємося створити сторінку /edit, і встановити роутер для реального використання. Сподіваюся, ви знайшли щось цікаве та корисне для себе цього разу. Слідкуйте за оновленнями!
Ще немає коментарів