Понимание компонентов в Ember 2

 ember generate component tab-item 

Теперь измените файл app/templates/components/tab-item.hbs для нового компонента ( app/templates/components/tab-item.hbs ) на:

 <span>Tab Item Title</span> {{yield}} 

Теперь давайте вложим три tab-items в наш основной компонент tab-switcher . Измените файл шаблона tab-switcher ( app/templates/components/tab-switcher.hbs ) на:

 <p>This is some content coming from our tab switcher component</p> {{tab-item}} {{tab-item}} {{tab-item}} {{yield}} 

Как упоминалось выше, помощник yield будет отображать любой шаблон Handlebars, который передается нашему компоненту. Однако это полезно только в том случае, если мы используем tab-switcher в форме блока. Так как мы не являемся, мы можем полностью удалить помощник yield .

Теперь, когда мы просматриваем браузер, мы видим три tab-item components , все из которых говорят «Название элементов табуляции». Наш компонент сейчас довольно статичен, поэтому давайте добавим некоторые динамические данные.

Добавление динамических данных

Когда запускается приложение Ember, маршрутизатор отвечает за отображение шаблонов, загрузку данных и настройку состояния приложения. Это делается путем сопоставления текущего URL с указанными вами маршрутами. Давайте создадим маршрут для нашего приложения:

 ember generate route application 

Ответьте «нет» на вопрос командной строки, чтобы избежать перезаписи существующего файла application.hbs . Это также сгенерирует файл app/routes/application.js . Откройте это и добавьте свойство модели:

 export default Ember.Route.extend({ model: function(){ }); }); 

Модель — это объект, который представляет базовые данные, которые ваше приложение представляет пользователю. Все, что пользователь ожидает увидеть, должно быть представлено моделью. В этом случае мы добавим содержимое наших вкладок в нашу модель. Для этого измените файл следующим образом:

 import Ember from 'ember'; export default Ember.Route.extend({ model: function(){ var tabItems = [ { title: 'Tab 1', content: 'Some exciting content for the tab 1' }, { title: 'Tab 2', content: 'Some awesome content for the tab 2' }, { title: 'Tab 3', content: 'Some stupendous content for the tab 3' } ]; return tabItems; } }); 

Затем измените файл шаблона tab-switcher ( app/templates/components/tab-switcher.hbs ) на:

 {{#each tabItems as |tabItem| }} {{tab-item item=tabItem }} {{/each}} 

Затем измените содержимое файла app/templates/components/tab-item.hbs ( app/templates/components/tab-item.hbs ) на:

 <span>{{item.title}}</span> {{yield}} 

Наконец, измените использование tab-switcher в файле application.hbs на:

 {{tab-switcher tabItems=model}} 

Это демонстрирует, как передать свойства компоненту. Мы сделали свойство item доступным для шаблона компонента tab-item . После обновления страницы вы должны увидеть заголовки элементов вкладки, отражающие данные моделей.

Добавление взаимодействий с помощью действий

Теперь давайте удостоверимся, что когда пользователь нажимает на заголовок tab-item , мы отображаем содержимое этого tab-item . Измените файл шаблона tab-switcher ( app/templates/components/tab-switcher.hbs ) на:

 {{#each tabItems as |tabItem| }} {{tab-item item=tabItem setSelectedTabItemAction="setSelectedTabItem" }} {{/each}} <div class="item-content"> {{selectedTabItem.content}} </div> 

Это изменение предполагает, что у нас есть свойство tabItem в компоненте tab-switcher . Это свойство представляет текущий выбранный tab-item . В настоящее время у нас нет такой собственности, поэтому давайте разберемся с этим.

 {{#each tabItems as |tabItem| }} <div {{action "setSelectedTabItem" tabItem}} > {{tab-item item=tabItem setSelectedTabItemAction="setSelectedTabItem" }} </div> {{/each}} <div class="item-content"> {{selectedTabItem.content}} </div> 

 export default Ember.Component.extend({ actions: { setSelectedTabItem: function(tabItem){ this.set('selectedTabItem', tabItem); } } }); 

 <div class="item-content"> {{selectedTabItem.content}} </div> {{#each tabItems as |tabItem| }} {{tab-item item=tabItem setSelectedTabItemAction="setSelectedTabItem" }} {{/each}} 

 <span {{action "clicked" item }}>{{item.title}}</span> {{yield}} 

 export default Ember.Component.extend({ actions:{ clicked: function(tabItem){ this.sendAction("setSelectedTabItemAction", tabItem); } } });