Привет, ребята! Я работал с компонентом аккордеона ember-boostrap и решил поделиться с вами тем, как я создал функциональность открытия/закрытия всех аккордеонов в моем веб-приложении.
// js import Ember from 'ember';export default Ember.Component.extend({ toggleCollapsed: false, actions: { toggleAllAccordions() { this.toggleProperty('toggleCollapsed') } } });// html <div class="accordion-container"> <button {{action 'toggleAllAccordions'}}>Toggle Menus</button><div> {{#bs-accordion as |acc|}} {{#acc.item value="1" as |aitem|}} {{#aitem.title}} title goes here {{/aitem.title}} {{#aitem.body collapsed=toggleCollapsed}} body goes here {{/aitem.body}} {{/acc.item}} {{#acc.item value="2" as |aitem|}} {{#aitem.title}} title goes here {{/aitem.title}} {{#aitem.body collapsed=toggleCollapsed}} body goes here {{/aitem.body}} {{/acc.item}} and more accItems can go here {{/bs-accordion}} </div> </div>
Итак, у нас есть компонент и его шаблон. Ничего фантастического. Давайте более подробно рассмотрим файл шаблона. У нас есть только кнопка, которая вызовет наш toggleAllAccordions, чтобы вызвать открытие и закрытие аккордеонов, которые вы увидите на своей веб-странице. Затем у вас есть возможность использовать для рендеринга аккордеонов ember-bootstrap.
Здесь важно отметить, что я разделил aitem.title и aitem.body из bs-accordion, потому что мы хотим дать aitem.body свойство, называемое свернутым, которое будет меняться в зависимости от нашей кнопки. Документация по этому поводу находится здесь. Без этого вам пришлось бы присвоить каждому элементу аккордеона одно и то же свойство value, но мы можем не захотеть этого во всех случаях.
