Статьи

Backbone.js — парсинг ответа от сервера

Август 22, 2018

За последние несколько недель я очень подробно изучал Backbone.js и считаю, что это отличная среда, которая помогает вам легко модульно кодировать. На прошлой неделе я писал о
проверке модели в конструкторе , а затем начал изучать
коллекции в Backbone. Объекты Model можно просматривать как строки таблицы, а Collection — как таблицу. Коллекция может объявлять
свойство модели и указывать, какие данные она будет хранить. Я искал способы, которыми можно заполнить коллекцию, выбирая данные модели с сервера. Один из способов сделать это — попросить
Модель выбрать данные, а затем добавить ответ в
Коллекцию., Другой способ сделать это — получить данные Коллекции непосредственно с сервера, т.е. вместо определения Модели вы создаете Коллекцию, выбирая данные с сервера. Обычно, когда вы отправляете запрос на сервер, данные ответа, по сути, представляют собой набор объектов. В этом случае вам действительно не нужно определять модель.

В коллекции вы можете определить свойство ‘
url ‘ и указать URL, с которого должны быть получены данные. После определения URL-адреса и создания экземпляра Collection вы можете вызвать
fetch для этого экземпляра, чтобы отправить запрос на сервер.
Fetch отправит запрос GET на сервер и дождется ответа. При вызове fetch вы можете указать в качестве аргументов вызова обработчики успеха и ошибок:
 

var CarCollection = Backbone.Collection.extend({
				
	//Specify REST URL
	url: 'http://localhost:8500/rest/Car/CarService',
	
	initialize: function () {
		this.bind("reset", function (model, options) {
			console.log("Inside event");
			console.log(model);
			
		});
	}	
});

var carCollectionInstance = new CarCollection();
			
carCollectionInstance.fetch({
	success: function(response,xhr) {
		 console.log("Inside success");
		 console.log(response);
	},
	error: function (errorResponse) {
	       console.log(errorResponse)
	}
});

Как вы можете видеть, я определил Collection —  CarCollection и экземпляр этой коллекции — carCollectionInstance . Затем я вызываю fetch для экземпляра, передавая функции success и callback-функции с ошибками . Когда вы вызываете fetch для экземпляра коллекции, он отправляет Ajax-запрос на сервер, используя jQuery $ .ajax () . Поэтому для вас важно включить jQuery на страницу. Указанный мной URL-адрес является URL-адресом ресурса REST на моем сервере ColdFusion. Этот ресурс REST выбирает некоторые записи из базы данных и возвращает данные запроса в формате JSON:

{ «ОПОРЫ»: [ «BRAND», «Модель», «COLOR»], «DATA»: [[ «Форд», «Фига», «RED»], [ «Форд», «Фиеста», «BLACK» ],
[«Honda», «CRV», «GREEN»], [«Honda», «CITY», «WHITE»]]}}

PS Я не включаю код для ресурса ColdFusion REST, который выбирает записи из базы данных. Это выходит за рамки этого поста, однако вы можете сослаться на серию постов, которые я написал на RESTful WebServices в ColdFusion здесь —  http://www.sagarganatra.com/search/label/REST

Ответ JSON содержит два ключи ‘COLUMNS’ и ‘DATA’, но по сути это один объект JSON. Поскольку коллекция модифицируется, сначала вызывается событие сброса, связанное с коллекцией, а затем обработчик успеха:

Внутри события d {length: 1, модели: Array [1], _byId: Object, _byCid: Object, _callbacks: Object} Внутри успеха d {length: 1, модели: Array [1], _byId: Object, _byCid: Object, _callbacks: Object}

Вы можете видеть, что в коллекцию добавлен только один объект модели. В возражении модели содержатся ключи «COLUMN» и «DATA». Это не тот формат, в котором я хотел, чтобы моя коллекция выглядела. Я хотел коллекцию, которая выглядела бы так:

{БРЕНД: «Ford», МОДЕЛЬ: «Фигу», ЦВЕТ: «КРАСНЫЙ»} {БРЕНД: «Honda», МОДЕЛЬ: «CRV», ЦВЕТ: «ЗЕЛЕНЫЙ»} ….

Прочитав документацию Backbone, я наткнулся на свойство parse, которое можно определить в Collection. Когда синтаксический анализ определен, ответ выборки сначала передается этой функции, а затем вызываются обработчики событий сброса и успеха. При разборе вы можете изменить коллекцию в соответствии с вашими потребностями, и очень важно вернуть данные из этой функции: 

(function () {
	
	//Create a Car Collection
	var CarCollection = Backbone.Collection.extend({
		
		//Specify REST URL
		url: 'http://localhost:8500/rest/Car/CarService',
		
		//Parse the response
		parse: function (response) {
			
			console.log("Inside Parse");
			
			//keys
			var keys = response.COLUMNS;
			
			//values
			var values = response.DATA;
						
			//Parse the response and construct models			
			for (var i = 0, length = values.length; i < length; i++) {
				
				var currentValues = values[i];
				var carObject = {};
				for (var j = 0, valuesLength = currentValues.length; j < valuesLength; j++) {
					carObject[keys[j]] = currentValues[j];
				}
				
				//push the model object
				this.push(carObject);	
			}
			
			console.log(this.toJSON());
			
			//return models
			return this.models;
	
		},
		
		initialize: function () {
			this.bind("reset", function (model, options) {
				console.log("Inside event");
				console.log(model);
				
			});
		}
		
	});
	
	
	var carCollectionInstance = new CarCollection();
	
	carCollectionInstance.fetch({
		success: function(response,xhr) {
			console.log("Inside success");
			console.log(response);
		},
		error: function (errorResponse) {
			console.log(errorResponse)
		}
	});
	
})();

Оператор return в функции синтаксического анализа очень важен, потому что, если он отсутствует, он приведет к пустой коллекции. Теперь, когда я регистрирую вывод, я вижу, что коллекция содержит Модели в нужном формате. Кроме того, вы увидите, что в коллекции есть четыре модели в обработчиках сброса и успеха.

 

 

 

41
Share: