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

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

	<form id="addContact">
		<div>
			<label for="first_name">Имя: </label>
			<input type="text" id="first_name" name="first_name">
		</div>
		<div>
			<label for="last_name">Фамилия: </label>
			<input type="text" id="last_name" name="last_name">
		</div>
		<div>
			<label for="email_address">Email: </label>
			<input type="text" id="email_address" name="email_address">
		</div>
		<div>
			<label for="description">Описание: </label>
			<textarea id="description" name="description"></textarea>
		</div>
		<div>
			<input type="submit" value="Добавить контакт">
		</div>
	</form>	

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

/*
|---------------------------------------------------
| Add Contact View
|---------------------------------------------------
*/

App.Views.AddContact = Backbone.View.extend({
	el: '#addContact',

	events: {
		'submit' : 'addContact'
	},

	addContact: function(e) {
		e.preventDefault();

		console.log( 'add contact now' );
	}
});

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

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

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

App.Views.AddContact = Backbone.View.extend({
	el: '#addContact',

	events: {
		'submit' : 'addContact'
	},

	addContact: function(e) {
		e.preventDefault();

		this.collection.create({
			first_name: this.$('#first_name').val(),
			last_name: this.$('#last_name').val(),
			email_address: this.$('#email_address').val(),
			description: this.$('#description').val()
		});

		console.log(this.collection.toJSON());
	}
});

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

Route::post('/contacts', 'contacts@store');

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

this.collection.create({
	first_name: this.$('#first_name').val(),
	last_name: this.$('#last_name').val(),
	email_address: this.$('#email_address').val(),
	description: this.$('#description').val()
}, { wait: true });

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

	public function action_store()
    {
        $input = Input::json();

        Contact::create(array(
            'first_name' => $input->first_name,
            'last_name' => $input->last_name,
            'email_address' => $input->email_address,
            'description' => $input->description
        ));

        $id = Contact::where('email_address', '=', $input->email_address )->only('id');

        $returnArr = array(
            'id' => $id,
            'first_name' => $input->first_name,
            'last_name' => $input->last_name,
            'email_address' => $input->email_address,
            'description' => $input->description
        );

        return json_encode($returnArr);
    }    

Отлично, новый контакт добавляется в базу данных. Но есть одно но. Можно добавить пустой контакт. Надо это исправить. Для этого у нашей модели, есть специальный метод 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 – не получится. Проверим это в браузере:

		var newContact = this.collection.create({
							first_name: this.$('#first_name').val(),
							last_name: this.$('#last_name').val(),
							email_address: this.$('#email_address').val(),
							description: this.$('#description').val()
						}, { wait: true });

		console.log(  newContact );

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