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

14 хв. читання

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

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

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

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

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

Блог з Parse

В останньому уроці, ми створили функцію "Додати новий блог" , і тепер користувачі можуть створювати пост в системі блогу. Логічним продовженням було б дати можливість користувачам змінювати і видаляти існуючі блоги. Цього разу, ми збираємося побудувати певну основу для цих функцій, зробити список блогів в адмінці сторінки і додати маршрутизатор (якщо ви не знаєте, що таке маршрутизатор, ця стаття для вас).

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".

Blog list

Маршрутизатор

Сподіваюся, що тепер вам вже відомо як зручно писати і читати з бази даних. Також, ви повинні були освоїти створення і візуалізації даних, які ви отримуєте. Однак, ви може помітити, що в коді занадто багато функцій 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 });
}

Тепер, якщо ви спробуєте, все повинно працювати правильно:

Router

Зверніть увагу, що ви все ще не можете безпосередньо перейти /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));
    }
})

Тепер перевірте і переконайтеся, що все працює.

Parse.js Blog

Висновок

У цьому уроці, ми змінили перегляд списку блогів в адмінці, і ви дізналися про важливу концепцію маршрутизатора. Я сподіваюся, що тепер ви зможете самостійно створити і візуалізувати подання(views) з Parse.js. І що ви зрозуміли, як роутер може допомогти нам організувати і повторно використовувати наш код.

Ми не заглиблюватися в деталі механіки маршрутизатора, як, наприклад, розуміння того, чому ми повинні мати {trigger: true}. Як вже було згадано, метою цього уроку є показати вам, як ви можете змусити все це працювати. Але якщо ви зацікавлені в отриманні додаткової інформації, обов'язково перегляньте документацію. Ми також будемо розглядати маршрутизатор більш детально, коли він знадобиться нам у наступних статтях серії.

Наступного разу, ми збираємося створити сторінку /edit, і встановити роутер для реального використання. Сподіваюся, ви знайшли щось цікаве та корисне для себе цього разу. Слідкуйте за оновленнями!

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.8K
Приєднався: 6 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація

Читайте також: container html, error function, /login?url=