Клуб API Карт

Дополнить шаблон для ListBox

ivan-zykov
26 мая 2015, 17:30

Добрый день! Необходимо в своём шаблоне для listbox добавить checkbox под кнопку вывода списка.

 

Делаю как-то так: https://jsfiddle.net/81kpsg42/


Однако при клике на любой html-элемент, расположенный внутри элемента управления listBox, срабатывает событие, открывающее список.


Как решить эту проблему? Может, есть и другие пути для добавления checkbox под кнопку вызова списка.


Этот checkbox будет влиять на событие при клике на пункт списка.


Очень надеюсь на вашу помощь. Сам решить задачу не могу.

8 комментариев

В этой ситуации надо самому в макете  управлять раскрытием списка, выставив опцию selectOnClick: false

Здравствуйте. Пытался решить как-то так:

https://jsfiddle.net/nwvtad30/

 

Но тут подключаются дополнительные библиотеки и к тому же не мог добиться работы этого списка в новой версии api.

Предложенный вами способ, наверное, был бы лучше. Вместо selectOnClick: false вы наверное имели ввиду expandOnClick. А как управлять раскрытием списка?

Помогите доработать код. Предполагаю, что обарабывать событие клика надо как-то так:
 
    // Создадим собственный макет выпадающего списка.
    ListBoxLayout = ymaps.templateLayoutFactory.createClass(
        '{{data.content}} ' +

        // Этот элемент будет служить контейнером для элементов списка. В зависимости от того, свернут или 
        // развернут список, этот контейнер будет скрываться или показываться вместе с дочерними элементами.
        '

    ' +
            ' Автопозиция', {

     
            build: function() {
                // Вызываем метод build родительского класса перед выполнением дополнительных действий.
                ListBoxLayout.superclass.build.call(this);
     
                this.childContainerElement = $('#childcontainer').get(0);
                // Генерируем специальное событие, оповещающее элемент управления о смене контейнера дочерних элементов.
                this.events.fire('childcontainerchange', {
                    newChildContainerElement: this.childContainerElement,
                    oldChildContainerElement: null
                });
     
                // Привязываем функции-обработчики к контексту и сохраняем ссылки на них, чтобы потом отписаться от событий.
                this.buttonChildcontainerCallback = ymaps.util.bind(this.buttonChildcontainer, this);
     
                // Начинаем слушать клики на кнопках макета.
                $('#button-childcontainer').bind('click', this.buttonChildcontainerCallback);

            },
     
            // Переопределяем интерфейсный метод, возвращающий ссылку на контейнер дочерних элементов.
            getChildContainerElement: function () {
                return this.childContainerElement;
            },
     
            clear: function () {
                // Заставим элемент управления перед очисткой макета откреплять дочерние элементы от родительского.
                // Это защитит нас от неожиданных ошибок, связанных с уничтожением dom-элементов в ранних версиях ie.
                this.events.fire('childcontainerchange', {
                    newChildContainerElement: null,
                    oldChildContainerElement: this.childContainerElement
                });
                this.childContainerElement = null;
                // Вызываем метод clear родительского класса после выполнения дополнительных действий.
                ListBoxLayout.superclass.clear.call(this);
            },
     
            buttonChildcontainer: function () {
                if (!listBox.state.get('expanded')) {
                    listBox.state.set('expanded', true);
                }
                else {
                    listBox.state.set('expanded', false);
                }
            },
        });

    Да expandOnClick: false

    Самому слушать клик в макете на нужном элементе и самому выставлять myListNox.state.set('expanded', true);

    Я обновил код выше, посмотрите, пожалуйста. Всё ли верно сделано? Работать работает. Но мне нужно понимать, верно ли я всё сделал.

    dimik, возникла проблема, которую не могу решить без помощи... как мне при перестраивании элемента управления (в случае, например, клика по кнопке вызова списка), сохранять изменившеся значение моего checkbox-а? Ума не приложу...

    сохраняйте его значение в state контрола

    Спасибо, получилось!