Створюємо власний блог з допомогою Parse.js, частина 6: Редагування

####Попередні уроки:

1. Створюємо власний блог з допомогою Parse.js

2. Створюємо власний блог з допомогою Parse.js: Працюємо з даними

3. Створюємо власний блог з допомогою Parse.js: Авторизація користувачів

4. Створюємо власний блог з допомогою Parse.js, частина 4: Додаємо новий блог

5. Створюємо власний блог з допомогою 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-адреси бути статичними (що означає, що ви зможете додати в обране, оновити сторінку, або відправити посилання іншим людям). Багато гарних речей, тож слідкуйте за оновленнями!