Делаем крутые Single Page Application на basis.js. Часть 203.07.2016 09:04

Давайте представим ситуацию:
Вы делаете страницу с интерактивным списком:

• добавление/удаление записей
• сохранение записей на сервере
• после загрузки страницы, сохраненные записи автоматически загружаются с сервера и отображаются
• во время загрузки и сохранения записей, кнопки добавить и сохранить должны быть заблокированы
• во время загрузки и сохранения записей, отображается сообщение «загружается…»
• если удалить все записи, то отображается сообщение «записей нет»

В basis.js есть несколько оберток для разных типов данных:
Value — обертка для скалярных значений
DataObject — обертка для объектов
Dataset — набор элементов типа DataObject

Value очень похож на Token (о котором мы говорили в прошлой статье), но имеет более богатый функционал и ряд дополнительных методов.
DataObject представляет собой объект, изменения данных в котором можно отслеживать. Помимо этого, DataObject предоставляет механизм делегирования.
Dataset предоставляет удобные механизмы для работы с коллекцией объектов.

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

Value: query

let Value = basis.require('basis.data').Value;
let DataObject = basis.require('basis.data').Object;
let Node = basis.require('basis.ui').Node;

let group1 = new DataObject({
  data: {
    name: 'Группа 1'
  }
});
let group2 = new DataObject({
  data: {
    name: 'Группа 2'
  }
});
let user = new DataObject({
  data: {
    name: 'Иван',
    lastName: 'Петров',
    group: group1
  }
});

new Node({
  container: document.querySelector('.container'),
  template: resource('./template.tmpl'),
  binding: {
    group: Value.query(user, 'data.group.data.name')
  },
  action: {
    setGroup1() { user.update({ group: group1 }) },
    setGroup2() { user.update({ group: group2 }) }
  }
});

  

    Выбранная группа: {group}
  
  

    Группа 1
    Группа 2
  

var DataObject = AbstractData.subclass({
    propertyDescriptors: {
      delegate: 'delegateChanged',
      target: 'targetChanged',
      root: 'rootChanged',
      data: {
        nested: true,
        events: 'update'
      }
    },

   // ...
}

А теперь еще раз посмотрим на тот запрос, который мы составили:

Value.query(user, 'data.group.data.name')

Состояние данных

• UNDEFINED — состояние данных неизвестно (состояние по умолчанию)
• PROCESSING — данные в процессе загрузки/обработки
• READY — данные загружены/обработаны и готовы к использованию
• ERROR — во время загрузки/обработки данных произошла ошибка
• DEPRECATED — данные устарели и необходимо снова синхронизировать

Можно придумать достаточно много кейсов по применению данного механизма. Вот лишь некоторые из них:

• когда набор данных находится в состоянии PROCESSING — кнопки сохранить и добавить должны быть заблокированы
• когда набор данных находится в состоянии ERROR — показывать сообщение с ошибкой

Как было сказано ранее, необходимо переключать состояния данных в зависимости от этапа синхронизации.
Есть два варианта того, как можно переключать состояния:

• вручную, при помощи callback’ов транспорта
• при помощи basis.net.action

let Dataset = require('basis.data').Dataset;
let Node = require('basis.ui').Node;
let action = require('basis.net.action');

// источник данных
let cities = new Dataset({
  // настриваем синхронизацию
  syncAction: action.create({
    url: '/api/cities',
    success(response) {
      // после завершения загрузки данных, необходимо превратить полученные JS-объекты в DataObject и поместить их в набор
      this.set(response.map(data => new DataObject({ data })))
    }
  })
});

new Node({
  container: document.querySelector('.container'),

  active: true,
  dataSource: cities,

  template: resource('./template/list.tmpl'),

  // описываем дочерние элементы
  // делегатом каждого дочернего элемента будет соответсвующий элемент набора данных
  childClass: {
    template: resource('./template/item.tmpl'),
    binding: {
      name: 'data:'
    },
    action: {
      input(e) {
        // при вводе текста в текстовое поле - обновляем соответствующий элемента данных
        this.update({ name: e.sender.value });
      },
      onDelete() {
        // при нажатии на кнопку "удалить" - уничтожаем элемент данных
        // при уничтожении элемента, он будет автоматически удален из набора
        this.delegate.destroy();
      }
    }
  }
});

Итак, мы создали набор данных cities и настроили его синхронизацию с сервером — указали, что элементы набора необходимо брать по адресу /api/cities.
Данные можно брать из любого источника, но у меня уже поднят сервер, который отдает список городов (он будет в репозитории к статье).
После получения данных, их необходимо поместить в набор.
Для этого используем метод Dataset#set. Он принимает массив из DataObject, которые нужно поместить в набор.
Но, в качестве ответа от сервера приходит массив из обычных JS-объектов и перед помещением их в набор, необходимо преобразовать эти объекты в DataObject.
Запись

this.set(response.map(data => new DataObject({ data })))

let wrap = require('basis.data').wrap;
// ...
this.set(wrap(response, true));

Так же обратим внимание на то, что мы добавили свойство dataSource для нашего компонента и переключили свойство active в true.
Исходя из того, что описано в документации, у нашего набора появился активный подписчик, а значит кому-то понадобилось содержимое этого набора.
Так как изначально в наборе пусто и его состояние установлено в UNDEFINED, то сразу же после регистрации активного подписчика, набор начинает синхронизацию по указанным ранее правилам. Полученный объекты набора будут связаны с DOM-узлами представления.

Это поведение уже заложено в Node. Как только в свойстве dataSource появляется набор, Node начинает отслеживать изменения указанного набора.
Для каждого элемента набора создает дочернее представление (компонент), которое связывает с элементом набора делегированием.
Если в наборе меняется состав элементов, то меняется и визуальное представление.
Так basis.js избавляет нас от циклов и прочей логики в шаблонах, при этом обеспечивая синхронизацию данных с их визуальным представлением.

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

Теперь будем выводить надпись «загружается…» во время синхронизации набора.
Для этого будем отслеживать состояние набора и выводить надпись «загружается…» только когда набор находится в состоянии PROCESSING

let STATE = require('basis.data').STATE;
let Value = require('basis.data').Value;
// ....
new Node({
  // ...
  binding: {
    loading: Value.query('childNodesState').as(state => state == STATE.PROCESSING)
  }
  // ...
});

    

        
загружается...
        
    

В показанном примере, мы создаем биндинг loading который должен говорить о том, идет ли сейчас процесс синхронизации или нет. Его значение будет зависеть от состояния набора данных — true, если набор находится в состоянии PROCESSING и false в ином случае.
Если для Node указан dataSource, то свойство Node#childNodesState будет дублировать состояние указанного источника данных.
Более подробно можно почитать тут.
Кстати, как видно из примера, если указать Value: query в качестве биндинга, но не указать объект, относительно которого строится указанный путь, то этим объектом становится Node, в binding которого находится Value: query.
И даже если у Node изменится источник данных, то биндинг loading всё равно будет хранить актуальное значение, основанное на том источнике данных, который установлен в данный момент. Этот факт еще раз показывает пользу от использования Value: query.

Для справки:

Value.query('childNodesState')

Value.query('dataSource.state')

Отлично! Осталось реализовать еще несколько моментов.
Если записей в наборе нет, то покажем соответствующее сообщение.
Но сначала, давайте подумаем — в каком случае должно показываться это сообщение?
Как минимум, когда в наборе нет элементов (свойство itemCount у набора равно нулю).
Давайте создадим соответсвующий биндинг:

new Node({
  // ...
  binding: {
    // ...
    hasItems: Value.query('dataSource.itemCount'),
    // ...
  },
  // ...
};

let Expression = require('basis.data.value').Expression;
// ...
new Node({
  // ...
  binding: {
    // ...
    empty: node => new Expression(
        Value.query(node, 'childNodesState'),
        Value.query(node, 'dataSource.itemCount'),
        (state, itemCount) => !itemCount && (state == STATE.READY || state == STATE.ERROR)
      ),
    // ...
  },
  // ...
};

    

        
загружается...
        
список пуст
        
    

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

    

        

            

                добавить
                сохранить
            
        
    
    

        
загружается...
        
нет записей
        
    

let Value = require('basis.data').Value;
let Expression = require('basis.data.value').Expression;
let Dataset = require('basis.data').Dataset;
let DataObject = require('basis.data').Object;
let STATE = require('basis.data').STATE;
let wrap = require('basis.data').wrap;
let Node = require('basis.ui').Node;
let action = require('basis.net.action');

let cities = new Dataset({
  syncAction: action.create({
    url: '/api/cities',
    success(response) { this.set(wrap(response, true)) }
  }),
  // создаем action для сохранения данных
  save: action.create({
    url: '/api/cities',
    method: 'post',
    contentType: 'application/json',
    encoding: 'utf8',
    // определяем данные, которые должны "уйти" на сервер
    body() {
      return {
        // передаем на сервер содержимое элементов набора
        // this указывает на набор данных, в контексте которого был вызван метод save
        items: this.getValues('data')
      };
    }
  })
});

new Node({
  container: document.querySelector('.container'),

  active: true,
  dataSource: cities,
  // Node#disabled - одно из особых свойств, значение которого автоматически пробрасывается в binding не только текущего компонента, но дочерних
  disabled: Value.query('childNodesState').as(state => state != STATE.READY),

  template: resource('./template/list.tmpl'),
  binding: {
    loading: Value.query('childNodesState').as(state => state == STATE.PROCESSING),
    empty: node => new Expression(
      Value.query(node, 'childNodesState'),
      Value.query(node, 'dataSource.itemCount'),
      (state, itemCount) => !itemCount && (state == STATE.READY || state == STATE.ERROR)
    )
  },
  action: {
    // добавить новый объект в набор
    add() { cities.add(new DataObject()) },
    save() { cities.save() }
  },

  childClass: {
    template: resource('./template/item.tmpl'),
    binding: {
      name: 'data:'
    },
    action: {
      input(e) { this.update({ name: e.sender.value }) },
      onDelete() { this.delegate.destroy() }
    }
  }
});

Как и говорилось выше — такие задачи решаются в basis.js без привлечения циклов и условных операторов. Всё реализовано на основе механизмов basis.js.
Конечно, внутри basis.js есть и циклы и условные операторы, но важно то, что basis.js позволяет нам свести их использование к минимуму. В клиентском коде и особенно в шаблонах.

Вот собственно и всё. Надеюсь было интересно и познавательно.
До следующего мануала!

Огромная благодарность lahmatiy за бесценные советы ;)

Несколько полезных ссылок

• Репозиторий с кодом из статьи
• Документация basis.js
• Исходный код basis.js

Комментарии (0)