Библиотека для управления текущим url приложения МойСклад.
Набор методов для модификации, отлеживания состояния приложения МойСклад и генерация url.
- Зачем?
- Установка
- Использование
- API
- Создание экземпляра
- router.start() : this
- router.stop() : this
- router.getState() : Object
- router.navigate(state, isPatch=false) : this
- router.navigate(path, query={} | uuid, isPatch=false) : this
- router.replaceState(...args) : this
- router.refresh() : this
- router.getPath() : String
- router.getSection() : String
- router.getAction() : String
- router.getQuery() : Object
- События
- License
Роутер задумывался с целью облегчить задачу написания расширений для онлайн-приложения МойСклад. Часто необходимо знать в каком разделе сейчас находится пользователь, получить идентификатор теущего документа, перейти в нужный раздел или обновить данные на странице после изменений.
$ npm install moysklad-router
Для работы с роутером небходимо подключить библиотеку отдельным скриптом либо использовать в составе сборки
// Создаем экземпляр роутера
let router = moyskladRouter()
// Запускаем отслеживание состояния url
router.start()
// Переходим на страницу заказа покупателя
router('customerorder/edit', '8ee87f6f-125e-11e3-a711-7054d21a8d1e')
let router = moyskladRouter()
Включает отслеживание текущего состояния.
Выключает отслеживание состояния.
Возвращает копию текущего состояния.
Пример url состояния для раздела "Отгрузки" с примененным фильтром "Проведенные отгрузки с 01.06.2015 00:00":
https://online.moysklad.ru/app/#demand?global_periodFilter=01.06.2015%2000:00:00,&global_operationApprovalState=1
Результат вызова router.getState()
,
{
path: 'demand',
query: {
global_periodFilter: ["01.06.2015 00:00:00",""],
global_operationApprovalState: "1"
}
}
или пример для отдельного документа "Отгрузка"
https://online.moysklad.ru/app/#demand/edit?id=0f698528-0b8d-11e5-7a40-e897000af75f
{
path: 'demand/edit',
query: {
id: "0f698528-0b8d-11e5-7a40-e897000af75f"
}
}
Перенаправляет приложение в новое состояние (новое состояние добавляется в историю навигации браузера).
Аргумент | Тип | Описание | Значение по умолчанию |
---|---|---|---|
state |
Object |
объект описывающий новое состояние | обязательный |
isPatch |
Boolean |
true , если необходимо частичное обновление состояния query . В этом случае значение параметра state накладывается на активное состояние приложения. |
false |
Пример вызова:
let curState = router.getState()
curState.query.id = '0f698528-0b8d-11e5-7a40-e897000af75f'
router.navigate(curState)
аналогичная запись с флагом isPatch
= true
router.navigate({
query: {
id: '0f698528-0b8d-11e5-7a40-e897000af75f'
}
}, true)
Перенаправляет приложение в новое состояние (новое состояние добавляется в историю навигации браузера).
Аргумент | Тип | Описание | Значение по умолчанию |
---|---|---|---|
path |
String |
значение ключа path состояния приложения |
обязательный |
query |
Object |
значение ключа query состояния приложения |
{ } |
uuid |
String |
идентификатор документа для раздела path , аналогично query со значением {id: uuid} |
нет |
isPatch |
Boolean |
true , если необходимо частичное обновление состояния query . В этом случае значение параметра query накладывается на активное значение query состояния приложения. |
false |
Все три вызова navigate
показанные ниже аналогичны:
router.navigate({
path: 'customerorder/edit',
query: { id: uuid }
})
router.navigate('customerorder/edit', uuid)
router.navigate('customerorder/edit', { id: uuid })
Если вы находитесь на странице редактирования заказа, то перейти к другому заказу можно следующим вызовом:
router.navigate({
query: { id: uuid }
}, true)
Перенаправляет приложение в новое состояние (новое состояние НЕ добавляется в историю навигации браузера).
Вызов метода аналогичен вызову router.navigate
, за тем исключением, что для установки состояния используется метод history.replaceState
(т.е. не затрагивается история навигации).
Обновляет текущую страницу приложения без перезагрузки.
Своего рода "хак", который позволяет реализовать обновление текущей страницы приложения МойСклад без перезагрузки и изменения истории навигации.
Реализуется через добавление в hash url ключа refresh
с числовым значением текущего времени, тем самым заставляя МойСклад обновить страницу.
Возвращает текущий path
состояния
// #customerorder/edit?id=123-456-789
router.getPath() // → 'customerorder/edit'
Возвращает текущий раздел
// #customerorder/edit
router.getSection() // → 'customerorder'
Возвращает текущую операцию
// #customerorder/edit
router.getAction() // → 'edit'
Возвращает текущий query
состояния
// #customerorder/edit?id=123-456-789
router.getQuery() // → { id: '123-456-789' }
router
реализует интерфейс EventEmitter
и генерирует следующие события:
-
Запуск роутера
router.on('start', router => {...})
-
Остановка роутера
router.on('stop', router => {...})
-
Изменение текущего состояния
router.on('route', (state, router) => {...})
MIT @ Vitaliy V. Makeev