Начнем с создания коллекции и присвоения ей модели:

App.Collections.Tasks = Backbone.Collection.extend({
	model: App.Models.Task,

	url: '/tasks'
});

Сразу удалим из модели урл, так как если он указан в коллекции, то в модели он не нужен.

Теперь напишем серверную часть. Мы берем всю информацию из таблицы БД и вынимаем из неё только необходимые нам данные моделей. Возвращаем клиенту новый массив моделей:

Route::get('/tasks', function() {
	$fetchTasks = Mission::all();
	$fetchedModels = array();

	foreach ($fetchTasks as $model) {
		$fetchedModels[]=$model->attributes;
	}


	return json_encode($fetchedModels);

});

Теперь создадим экземпляр коллекции в браузерной консоли и попробуем схватить данные с сервера:

Все данные прибыли. Коллекция заполнилась массивом моделей. Отлично!

Давай отобразим эти данные на странице. Для этого напишем два вида. Вид списка и вид элемента списка. Все так как мы уже писали в ранних уроках:

App.Views.Tasks = Backbone.View.extend({
	tagName: 'ul',

	render: function() {
			this.collection.each(this.addOne, this);
			return this;
	},

	addOne: function(task) {
			var task = new App.Views.Task({ model: task });
			this.$el.append( task.render().el );
	}


});


App.Views.Task = Backbone.View.extend({
	tagName: 'li',

	render: function() {
		this.$el.html( this.model.get('title') );
		return this;	
	}
});

Перейдем в консоль и повторим процесс создания и заполнения коллекции данными. Затем создадим экземпляр вида списка задач и добавим в него нашу коллекцию. После этого срендерим вид и вставим корневой элемент в dom-дерево:

var tasksCollection = new App.Collections.Tasks();
tasksCollection.fetch();

var tasksView = new App.Views.Tasks({ collection: tasksCollection });
tasksView.render();
$(document.body).append(tasksView.el);

Все замечательно срендерилось и вставилось. Напоследок повесим события прослушки изменения и удаления моделей. Для этого напишем в наших видах следующие initialize методы. А так же добавим в render вида Tasks очистку списка, для того чтобы каждый раз когда мы генерим список он был новым:

App.Views.Tasks = Backbone.View.extend({
	tagName: 'ul',

	initialize: function() {
		this.collection.on('add', this.addOne, this);	
	},

	render: function() {
			this.$el.empty();
			this.collection.each(this.addOne, this);
			return this;
	},

	addOne: function(task) {
			var task = new App.Views.Task({ model: task });
			this.$el.append( task.render().el );
	}


});


App.Views.Task = Backbone.View.extend({
	tagName: 'li',

	initialize: function() {
		this.model.on('destroy', this.remove, this); 	
	},

	render: function() {
		this.$el.html( this.model.get('title') );
		return this;	
	}
});

Теперь при добавлении модели в коллекцию, будет срабатывать метод addOne, генерящий новый html и моментально отображающий его на странице.

Проверим это в консоли с помощью метода create, который под своим капотом не только добавляет модель в коллекцию, но так же и вызывает метод save, отправляющий данные на сервер:

var tasksCollection = new App.Collections.Tasks();
tasksCollection.fetch();

var tasksView = new App.Views.Tasks({ collection: tasksCollection });
tasksView.render();

$(document.body).append(tasksView.el);

tasksCollection.create({title: "Задача новая" });

На экране сразу же вы увидите, что в список добавилась новая задача. А перейдя в phpmyadmin заметите, что добавилась и новая строка в таблицу.

Проверим удаление модели. В консоли забьем в переменную модель, а потом применим на ней метод destroy():

var task = tasksCollection.at(4);
task.destroy();

На странице моментально удалиться одноименная с моделью задача, а в базе данных – строка. Ну что же, это был насыщенный урок и надеюсь вы научились многому. Внимательно отнеситесь к тому, чтобы усвоить всю полученную информацию и как только будете уверены в знаниях, приступайте к следующему уроку.