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

#27 — Менеджер контактов. Добавление контактов.

В этом посте, мы подробно разберем процесс написания функционала добавления контактов.

*Изменения контроллера пропущенные в видео, описаны далее в статье

Приветствую! Начнем с верстки. Сверстаем форму, через которую мы будем добавлять наши контакты.

И сразу напишем вид, отвечающий за добавление контакта и в нем — соответствующее событие addContact.

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

Вернемся к виду и допишем событие addContact. При клике на кнопку «Добавить контакт», в коллекции будет создаваться новая модель, с данными которые мы ввели в форму и на сервер будут отправляться те же данные. Для этого мы используем метод create, под капотом которого, запускается метод save.

Примем запрос на серверной стороне. Напишем роут, запускающий соответствующий action в контроллере.

Класс! В базу данных и коллекцию добавился новый контакт, но обратим внимание на одну вещь. В добавленной к коллекции модели нету айдишника. Это потому что он не возвращается с сервера. Для этого надо сделать пару изменений. Сначала, допишем объект-параметр { wait: true } для метода create. Этот параметр указывает, чтобы в коллекцию не добавлялась новая модель, пока не придет ответ с сервера.

Так же на серверной стороне, нам надо возвращать модель с айдишником, который автоматически генериться в БД. Id нам необходим. Без него события (которые нам понадобятся позже) коллекции не будут срабатывать, так как она не будет понимать, какая модель была добавлена. Поэтому изменим action_store нашего серверного контроллера.

Отлично, новый контакт добавляется в базу данных. Но есть одно но. Можно добавить пустой контакт. Надо это исправить. Для этого у нашей модели, есть специальный метод validate. Отвалидируем имя, фамилию и email.

App.Models.Contact = Backbone.Model.extend({
//validate
validate: function(attrs) {
if( ! attrs.first_name || ! attrs.last_name ) {
return ‘Имя и фамилия обязательны для заполнения!’;
}

if( ! attrs.email_address ) {
return ‘Пожалуйста введите валидный Email.’;
}
}
});

Теперь добавить контакт с незаполненными именем и фамилией, а так же пустым email — не получится. Проверим это в браузере.

На этом сегодня все. Всем спасибо и успехов в разработке!

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

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

14 thoughts on “#27 — Менеджер контактов. Добавление контактов.

  1. Антон Чипига:

    В видео не были затронуты изменения контроллера, которые описываются в статье)

  2. Guest:

    Пересмотрел видео)) что то у нас id не вернулся, без палева перезагрузили страницу, опа а вот и id ))) Думаю надо в начале статьи как то пометить, что изменения контроллера в статье)

    1. NickyMeloman:

      Спасибо) пометили.

  3. Ruslan:

    Отличная серия скринкастов! Спасибо огромное!

    Подскажите правильно ли я понимаю что так записать будет тоже верно:

    App.Views.App = Backbone.View.extend({
    initialize: function() {
    var addContactView = new App.Views.AddContact({ collection: this.collection });
    }
    });

    Т.е. вместо App.contacts будет this.collection

    1. NickyMeloman:

      Так можно писать, только если вы пишите внутри вида App.Views.App свойство collection и передаёте в него App.contacts. И дальше в любом месте этого вида вы имеете доступ к коллекции через this.collection. Соответственно и создавать новые подвиды сможете так new App.Views.AddContact({ collection: this.collection });

  4. Zania:

    Подскажите, в чем может быть проблема? 22ая строка как раз
    Backbone.history.start();
    Все необходимые js-файлы подключены (backbone, underscore, jquery), скобки и пунктуация соблюдены.

    Текст ошибки :
    Uncaught TypeError: Property ‘$’ of object # is not a function backbone-min.js:1390
    _.extend.startbackbone-min.js:1390
    (anonymous function)main.php:22

    1. NickyMeloman:

      Судя по ошибке, можно предположить, что вы пытаетесь на JQuery выборке какого то DOM-объекта вызвать Backbone.js функцию. Проверяйте как вы берете объект. Выводите его в консоль. Проверяйте правильно ли вы его вообще взяли. А вообще можно долго гадать. Надо видеть код, так сложно что то сказать.

    2. Uyntx Xyntu:

      Проверьте бэкбон подключаете после андырскора, джэ-квери, и перед main.js ?

  5. Eldar:

    Господа, подскажите как сделать так чтобы при создании модели через collection.create, всё таки проходила валидация описанная в модели ?

    1. Eldar:

      Всё понял, если как вы this.collection.create(object, options), то валидация не будет пройдена, если же this.collection.create(model, options) то валидация отработает, я просто не понимаю зачем так всё усложнять…(в backbone я имею ввиду). Кстати отличный материал, спасибо вам !

  6. Слава Фоменко:

    Хотелось бы посмотреть как проиходит валидация на сервере, с возвратом ошибок по полям, ведь помимо клиентской валидации нам всё-равно надо всё проверять на сервере.

  7. Alexander:

    а где-нибудь можно скачать этот проект?

  8. Akmurat Kadyrov:

    Господа почему при this.collection.create() у меня отправляется OPTIONS а не POST запрос на сервер?

  9. Анастасия Ермолик:

    При выполнении this.collection.create выдается Internal server error (500). Что с этим можно сделать?

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

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