Асинхронная загрузка данных Backbone.js

Добрый день! Я продолжу писать статьи о том, что пришлось писать на Backbone.js в ходе работе и с чем вы можете столкнуться. Сегодня речь пойдет про асинхронную загрузку данных, а точнее данных которые часто нам нужны на сайте.

Предположим на сайте можно добавлять разные типы данных (картинка, текст, аудио), но эти типы могут расширяться. Возможные типы хранятся в базе данных. Каждый раз доставать с базы очень накладно. Нам надо один раз достать и использовать.

Так мы загрузим данные:

app.models.dataTypes = new DataTypesCollection();
app.models.dataTypes.fetch();

Теперь в любом месте показываем пользователю app.models.dataTypes.Но у нас возможен один прокол, что если пользователь сразу зайдет на ту страницу, где нам нужно это поле? Для этого создадим событие, что данные получены.

app.models.dataTypes = new DataTypesCollection();
app.models.dataTypes.fetch({
	success: function() {
		Backbone.history.trigger("dataTypesLoaded");
	}
});

Теперь нам нужно «словить» это событие. Для этого я написал функцию loadDataTypes, которая принимает в качестве параметра место, где надо расположить данные (place). Потому что у меня на одной странице нужно отобразить этот блок в нескольких местах. (Добавление и редактирование данных происходит на одной странице).

function loadDataTypes(place) {
	place.empty(); // очищаем место
	var addDataTypes = function() { // функция добавления данных
		_.each(app.models.dataTypes.models, function(item) {
			item.set("value", item.get("data_type_code"));
			item.set("text", item.get("data_type_name"));
			var selectItem = new SelectItemView({ // вид для optionа
				el: place,
				model: item
			});
			selectItem.render(); // выдаем
		});
	}
		
	if (app.models.dataTypes.models.length != 0) { // если загружены
		addDataTypes();
	} else { // еще не загружены, "ловим" событие.
		Backbone.history.on("dataTypesLoaded", addDataTypes); 
	}
}

Таким образом, мы загружаем данные, например при первой загрузке и потом выдаем в нужном месте.

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

С плюсов мы получили то, что данные забираем с сервера только один раз и потом их используем сколько хотим. Тем самым не навредив пользователю.

P.S. Если надо описание SelectItemView, пишите я могу дописать, но там все тривиально.

Автор: ozzycv

Источник