Средний
30 уроков
(5 часов 6 минут)
Курс
Backbone.js
Видеокурс, который познакомит вас с Backbone.js. Данная библиотека придает структуру веб-приложениям.
Содержание

#28 — Менеджер контактов. Отображение контактов.

Сразу к делу! Наш менеджер контактов продолжает расцветать. Сегодня мы напишем отображение контактов на странице и автоматическое обновление html и dom-дерева, при добавлении нового контакта в коллекцию.

Начнем с двух новых видов — вида списка всех контактов и вида единичного контакта. Все это мы уже проходили, поэтому в подробности вдаваться не будем. Единственное новое, в качестве шаблонизатора мы будем использовать handlebars.js.

Подключаем handlebars и пишем шаблон контакта.

В main.js напишем вспомогательную функцию компиляции шаблонов.

Теперь просто передаем в нашу функцию template айдишник шаблона и записываем все это в свойства вида.После чего, в элемент tr нашего вида вставляем сгенерённый шаблон контакта, с данными из модели

Создаем экземпляр нашего вида списка контактов, передаем в него коллекцию и рендерим.

Верстаем таблицу и вставляем в нее сгенеренный tbody

Пропишем немного стилей

Теперь нужно обновлять таблицу и очищать инпуты. Начнем с очищения инпутов.

И напоследок самое интересное. Делаем автоматическое обновление DOM-дерева и рендеринг HTML, при добавлении в коллекцию новой модели. Осуществляется это прослушкой события ‘Add’. Напишем ее в методе всех контактов. Как только, коллекция увеличится на одну модель, тут же сработает метода addOne

Классно, не правда ли? До нового видеоурока!

Материалы к уроку:
Делись:

Оставь комментарий!

3 thoughts on “#28 — Менеджер контактов. Отображение контактов.

  1. Владислав:

    Вопрос а каким образом обновляется таблица контактов? вы здесь слушаете изменение коллекции в Views.Contacts добавление по сути происходит в this.$el метода addOne, а добавление всей таблицы происходит в Views.App который никоим образом не обновляется.

    1. NickyMeloman:

      Добавление происходит в методе addContact вида App.Views.AddContact

  2. kuzroman:

    Чтобы id возвращалось в Laravel 4 лучше использовать упрощенную вверсию метода store:

    public function store() {
    return Contact::create(Input::all()); // так и добавиться в базу и выведет результат добавления.
    }

Добавить комментарий

Рекомендуемые курсы