Карусель

Carousel/View - это интерфейсный контрол, предназначенный для отображения данных в виде горизонатльного списка с прокуруткой (карусели) и возможностью выбора элемента.

Конфигурация

Контрол имеет следующие опции:

• source — Источник данных контрола;
• itemTemplate — Пользовательский шаблон элемента;
• selectedKey — Ключ выбранного элемента;
• keyProperty — Имя свойства, содержащего информацию об идентификаторе текущего элемента;
• filter — Конфигурация объекта фильтра.

Рассмотрим простейший пример создания карусели.

itemTemplate

При установке пользовательского шаблона обязателен вызов шаблона по умолчанию wml!Carousel/templates/defaultTemplate. Это необходимо для наложения базовых стилей и корректной работы опции readOnly.

Данные элемента из источника будут доступны в itemTemplate.item

<!-- WML -->
<Carousel.View ...>
    <ws:itemTemplate>
        <ws:partial template="wml!Carousel/templates/defaultTemplate">
            <!-- Пользовательский шаблон -->
            <div style="background-color: {{itemTemplate.item.bgColor}}">
                <div class="myCarousel__item">
                    {{itemTemplate.item.id}} - {{itemTemplate.item.demoText}}
                </div>
            </div>
        </ws:partial>
    </ws:itemTemplate>
</Carousel.View>

source

Установим источник данных для шаблона из предыдущего примера.

<!-- WML -->
<Carousel.View source="{{_source}}" ...>
    ...
</Carousel.View>

// TypeScript
...

export default class MyCarousel extends Control<...> {
    ...
    protected _source: Memory = new Memory({
        data: [
            {
                id: '1',
                demoText: 'Item 1',
                bgColor: '#999999'
            }, {
                id: '2',
                demoText: 'Item 2',
                bgColor: '#D04D4D'
            }, {
                id: '3',
                demoText: 'Item 3',
                bgColor: '#72be44'
            }
        ],
        keyProperty: 'id'
    });
}

selectedKey и keyProperty

Важно отметить, что ключ выбранного элемента не работает автономно и нуждается в синхронизации с помощью директивы bind. По клику на элемент генерируется событие selectedKeyChanged с идентификатором выбранного элемента.

Установим имя свойства идентификатора и ключ выбранного элемента для предыдущих примеров.

<!-- WML -->
<Carousel.View keyProperty="id" bind:selectedKey="_selectedKey" ...>
    ...
</Carousel.View>

// TypeScript
...

export default class MyCarousel extends Control<...> {
    ...
    protected _selectedKey: string = '1';
}

filter

Фильтр отправляется в запрос к источнику для получения данных. В данном примере в списке будет отображаться 2 элемента:

<!-- WML -->
<Controls.list:View
    keyProperty="id"
    filter="{{_filter}}"
    source="{{_source}}" />

// JavaScript
this._filter = {id: ['1', '2']};
this._source = new Memory({
keyProperty: 'id',
data: [
    {
        id: '1',
        title: 'Yaroslavl'
    },
    {
        id: '2',
        title: 'Moscow'
    },
    {
        id: '3',
        title: 'St-Petersburg'
    }
]
});

Полный демо-пример можно найти в документации к контролу.