0

У меня есть кнопка, как определено ниже.Кнопка повторного переключения Bootstrap после того, как Ember уже переключил его на повторную визуализацию

<button type="button" 
    class="btn btn-primary-outline {{if shouldBeActive "active"}}" 
    data-toggle="button" 
    {{action "makeActive"}}>MyButton</button> 

makeActive действие переключает shouldBeActive свойство, которое вызывает кнопку, чтобы получить или потерять .active класс, когда уголек повторно делает шаблон.

Это все замечательно ... за исключением того, что обработчик щелчка bootstrap.js для переключения класса кнопки .active затем запускается после того, как Ember обновил DOM, в результате чего кнопка переключилась в неправильное состояние переключения.

Есть ли красноречивый способ исправить это? Моя единственная мысль, что я мог бы сделать что-то глупое, как ...

<button type="button" 
    class="btn btn-primary-outline {{if (xor shouldBeActive isFirstRender) "active"}}" 
    data-toggle="button" 
    {{action "makeActive"}}>MyButton</button> 

... эффективно установить активное состояние на противоположное тому, что предназначено, и пусть самозагрузки переключить его на то, что подходит.

+0

Вы должны решить, что должно обрабатывать этот клик. Зачем нужен обработчик щелчка Bootstrap? Если у вас есть обработчик щелчка Bootstrap, зачем вам нужен другой в Ember для переключения свойства? Похоже, вам нужно решить и переместить всю логику в 1 обработчик. –

+0

@ DanielKmak У меня нет контроля над обработчиком щелчка Bootstrap; он существует внутри bootstrap.js. Bootstrap.js необходим для работы других компонентов бутстрапа, поэтому не следует избегать включения этого js-файла. – kjb

+1

Что делать, если вы удалите: 'data-toggle =" button "'? –

ответ

2

Похоже, что обработчик щелчков Bootstrap будет срабатывать только в том случае, если вы держите data-toggle="button", поэтому его удаление должно привести к срабатыванию только обработчика Ember.

+0

Я застрял в ментальной колею, где, как мне показалось, мне нужна кнопка «data-toggle =» «для кнопки, которая может быть переключена. Должно было понять, что добавление действия к кнопке выполняется именно так, поскольку ember затем преформирует повторную визуализацию и устанавливает «активный» класс. Благодаря! – kjb