Knockout JS. Плагин mapping

Никак не могу проснуться сегодня. Попробую сделать это с помощью небольшой статьи для блога. Сегодня я возвращаюсь к описанию knockout.js и хочу рассказать о замечательной плагине mapping. Плагин настолько хорош, что только он удостоился ссылки с официального сайта knockoutjs.com

Плагин mapping испольуется для создания knockout-модели на основе javascript-модели и, естественно, для обратного преобразования. Очень часто плагин используется для преобразования данных полученых с сервера от backend-приложения.

  1. //пример создания модели на основе полученных данных
  2. var viewModel = ko.mapping.fromJS(data);
  3. ...
  4. //обновление модели
  5. ko.mapping.fromJS(data, {}, viewModel);

Все свойства объекта data будет пребразованы в observable или observableArray, в зависимости от своего типа.

Для обратного преобразования модели в объект используется функция ko.mapping.toJS. При этом в полученном объекте будут присутствовать только те свойства, которые были в исходном объекте при вызове ko.mapping.fromJS

  1. var data = {id: '1', name: 'Ann'};
  2. var model = ko.mapping.fromJS(data);
  3. model.job = 'Pretty girl';
  4. console.log(typeof(model.job)); // >> string
  5. var js = ko.mapping.toJS(model);
  6. console.log(typeof(js.job)); // >> undefined

Advanced usage

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

Опция update позволяет определить функцию, которая будет вызвана, если свойство с определенным именем уже существует в обновляемом объекте.

С помощью опции ignore можно указать имена свойств, которые не должны обрабатываться при формировании модели.

include позволяет дополнить список свойств, которые будут использоваться при обратном преобразовании с помощью функции ko.mapping.toJS

copy задает список свойств, которые должны быть скопированы при формировании модели без изменений. То есть они не будут преобразованы в observable или observableArray

При преобразовании вложенных массивов для каждого из них можно задать несколько опций

keys - определяет ключевое поле. При обновлении модели объекты с одинаковым значеним ключа будут обновляться, а не создаваться вновь, что позволит сохранить уже существующие связи.

create - позволяет определить функцию, которая будет вызвана при обработке каждого элемента массива. Её можно использовать, для вызова функции-конструктора и создания объектов нужного типа.

Пример

В своем проекте по учету линых финансов, я использую плагин mapping для сохранения и загрузки информации о счетах. Вот как выглядят функции загрузки и сохранения.

  1. account.prototype.save = function()
  2. {
  3. return this.ajax('save', ko.mapping.toJS(this));
  4. };
  5.  
  6. account.prototype.load = function()
  7. {
  8. var self = this;
  9. var promise = this.ajax('load', {})
  10. .done(function()
  11. {
  12. var json = this;
  13. var mapping =
  14. {
  15. 'transfers' :
  16. {
  17. create: function(options)
  18. {
  19. return transfer(options.data);
  20. }
  21. }
  22. }
  23. ko.mapping.fromJS(json[getType(self)], mapping, self);
  24. });
  25. return promise;
  26. };

Функция ajax() отправляет асинхронный запрос на сервер, который, в случае опреации load возаращает данные завернутые в JSON. В полученном объекте, хранится массив transfers, содержащий информацию обо всех движениях средств по счету.

Функция transfer, которая вызывается для обработки элементов массива - это функция конструктор, которая выглядит примерно вот так:

  1.  
  2. function transfer(data)
  3. {
  4. if(!(this instanceof transfer))
  5. {
  6. return new transfer(data)
  7. }
  8. var self = this;
  9.  
  10. var defs =
  11. {
  12. id: getKey(),
  13. date: round((new Date()).getTime() / 1000, 0), /* fix for php */
  14. sum: 0.0,
  15. from: 0,
  16. to: 0
  17. };
  18.  
  19. $.extend(defs, data);
  20.  
  21. ko.mapping.fromJS(defs, {}, self);
  22.  
  23. ...
  24. }
  25.  

На github этот код можно обнаружить в этой ревизии

Читайте в блоге

Knockout JS. Первое знакомство
Knockout JS. Текст и внешний вид
Knockout JS. Определение собственных связываний (custom binding)

Метки: js knockoutjs money

Комментарии:

Войдите на сайт, чтобы оставить комментарий