Хей момчета! Работех с компонента за акордеон 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>
Така че тук имаме компонент и неговия шаблон. Нищо изискано. Нека разгледаме по-задълбочено файла с шаблона. Ние просто имаме бутон, който ще извика нашите превключватели на всички акордеони, за да задействаме отворено и затворено свиване на акордеоните, които ще видите на вашата уеб страница. След това имате възможност за изобразяване на ember-bootstrap акордеони.
Най-важното нещо, което трябва да отбележим тук, е, че разделих aitem.title и aitem.body на bs-accordion, защото искаме да дадем на aitem.body свойство, наречено свито, което ще се промени въз основа на нашия бутон. Има документация за това „тук“. Без да правите това, ще трябва да дадете на всеки свой акордеон елемент една и съща стойност, но може да не искаме това във всички случаи.
