1

Есть такой код, где добавлен 1 элемент в выпадающем списке.

ListBoxLayout = ymaps.templateLayoutFactory.createClass(

        "<button id='my-listbox-header' class='btn btn-success dropdown-toggle' data-toggle='dropdown'>" +

            "{{data.title}} <span class='caret'></span>" +

        "</button>" +

        // Этот элемент будет служить контейнером для элементов списка.

        // В зависимости от того, свернут или развернут список, этот контейнер будет

        // скрываться или показываться вместе с дочерними элементами.

        "<ul id='my-listbox'" +

            " class='dropdown-menu' role='menu' aria-labelledby='dropdownMenu'" +

            " style='display: {% if state.expanded %}block{% else %}none{% endif %};'></ul>", {

        build: function() {

            // Вызываем метод build родительского класса перед выполнением

            // дополнительных действий.

            ListBoxLayout.superclass.build.call(this);

            this.childContainerElement = $('#my-listbox').get(0);

            // Генерируем специальное событие, оповещающее элемент управления

            // о смене контейнера дочерних элементов.

            this.events.fire('childcontainerchange', {

                newChildContainerElement: this.childContainerElement,

                oldChildContainerElement: null

            });

        },

        // Переопределяем интерфейсный метод, возвращающий ссылку на

        // контейнер дочерних элементов.

        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);

        }

    }),

    // Также создадим макет для отдельного элемента списка.

    ListBoxItemLayout = ymaps.templateLayoutFactory.createClass(

        "<li style='border-bottom:1px solid #5cb85c;'>{{data.content}}</li>"

    ),

    listBoxItems = [

        new ymaps.control.ListBoxItem('текст1')

    ],

    // Теперь создадим список, содержащий 2 пункта.

    listBox = new ymaps.control.ListBox({

            items: listBoxItems,

            data: {

                title: 'Выберите пункт'

            },

            options: {

                // С помощью опций можно задать как макет непосредственно для списка,

                layout: ListBoxLayout,

                // так и макет для дочерних элементов списка. Для задания опций дочерних

                // элементов через родительский элемент необходимо добавлять префикс

                // 'item' к названиям опций.

                itemLayout: ListBoxItemLayout

            }

        });

myMap.controls.add(listBox, {float: 'left'});

Нужно при клике на кнопку, пусть будет текст2 добавить в listBox еще 1 элемент с текстом "текст2", и желательно при этом еще поменять у второго элемента цвет бордера "{{data.content}}"

1 ответ 1

0

Элементы списка в вашем примере хранятся в массиве listBoxItems. Вы можете записать ещё один массив, например listBoxItemsExtended с двумя кнопками:

listBoxItemsExtended = [

    new ymaps.control.ListBoxItem('текст1'),
    new ymaps.control.ListBoxItem('текст2')

]

Затем на click по вашей кнопке вешаете функцию:

listBox.options.set('items', 'listBoxItemsExtended ');

При необходимости пишете такую же функцию для массива listBoxItems.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.