-
Notifications
You must be signed in to change notification settings - Fork 1
Library Setup
После подключения библиотеки
<script type="text/javascript" src="/js/che2/public/js/app.js"></script>
инициализируем её:
che();
или
che(config);
Доступные параметры конфига:
| Параметр | По умолчанию | Описание |
|---|---|---|
| storage | ["fake", "localStorage", "cookies"] |
Конфигурирование хранилища для кэша. Использован будет первый доступный для данной сессии storage. По умолчанию используется "fake" - кэш отключён |
| modules | [] |
Список подключаемых модулей. Доступны: пока никаких =) |
| sectionTagName | "section" |
Тэг, в который оборачиваются блоки, приходящие в ответе от сервера |
| reloadSectionsDataAttributeName | "data-reload-sections" |
Атрибут, конфигурирующий параметры запроса к серверу |
| reloadParamsDataAttributeName | "data-reload-params" |
Атрибут в котором необходимо указывать дополнительные параметры для передачи в объекте состояния при переходах |
| autoScrollOnTransitions | true |
Атрибут, включающий автоматический скролинг страницы до запомненой позиции при переходах по истории |
Например:
che({
storage: ['localStorage'], // используем localStorage для хранения кэша
});Для подключения ссылки или формы к библиотеке необходимо задать у элемента атрибут reloadSectionsDataAttributeName (по умолчанию: data-reload-sections):
Можно указывать несколько секций, разделяя их ";".
<a href="/some/page" data-reload-sections="pageView: #MainContent; SomeWidget: #WidgetContent1"></a><form id="myForm" action="/do/action" data-reload-sections="pageView: #myForm">
...
</form>Формат: sectionName1: DOM_Selector1; sectionName2: DOM_Selector2
Вставляет html, который сервер поставил в соответствие параметру object, в селектор DOM_Selector
Формат:
sectionName1: params1; sectionName2: params2
В этом случае параметры загрузки секций (params1, params2 ..) должны представлять из себя валидный JSON (не содержащий разделитель - ";"). Для каждого запрашиваемого объекта можно задать свою конфигурацию.
Допустимые параметры конфига:
| Параметр | Описание |
|---|---|
| target | CSS_Selector, в который следует поместить результирующий html |
| ns |
namespace, который будет добавлен к event'ам, создаваемым при загрузке и удалении секций. Может быть как строкой, так и массивом строк, если секция принадлежит сразу нескольким пространствам имен. Пример: {…,"ns": "popup",…} или {…,"ns": ["popup","whiteTheme"],…}
|
| custom | JSON, в произвольном формате — сопутствующие данные, использующиеся по желанию разработчика |
Допустимо совместное использование базовой и расширенной конфигурации для одной секции.
Допустимо заранее подготовить секции в DOM дереве и при конфигурировании указать селектор содержащего их контейнера.
Например, мы имеем контейнер:
<div id="sectionContainer"><title>new title</title><section data-selector="SomeWidget: #some">content</section></div>Тогда мы можем обойтись без серверного вызова, получив секции из этого контейнера:
<a href="/new" data-reload-sections="#sectionContainer">link</a>
Единственное предназначение севера при использовании библиотеки — уметь отдавать секции по запросу, сформированному клиенту. Каждая секция должна быть обернута в элемент sectionTagName (по умолчанию — section), содержащий атрибут reloadSectionsDataAttributeName, соответствующий полученному в запросе для данной секции.
Например, при нажатии на ссылку <a href="/some/page" data-reload-sections="pageView: #MainContent, Widget1: #WidgetPlace1">link</a> сервер должен вернуть примерно следующее:
<section data-reload-sections="pageView: #MainContent">
<p>Это содержимое страницы <b>some/page</b></p>
</section>
<section data-reload-sections="Widget1: #WidgetPlace1">
<p>А это содержимое виджета <b>Widget1</b></p>
</section>