En En

Отображение списка элементов


Если вам нужно выполнить перебор списка элементов, используйте хелпер {{#each}}. Первый аргумент хелпера — массив, который нужно перебрать. Каждое перебираемое значение становится блочным параметром. Блочные параметры доступны только внутри блока хелпера.

Например, этот шаблон перебирает массив people, который содержит объекты. Каждый элемент массива предоставляется как блочный параметр person.

<ul>
  {{#each people as |person|}}
    <li>Hello, {{person.name}}!</li>
  {{/each}}
</ul>

Блочные параметры, как и аргументы функции в JavaScript, позиционные. Каждый элемент в шаблоне выше называется person, но с тем же успехом сработает и human.

Шаблон внутри блока {{#each}} будет повторяться один раз для каждого элемента в массиве. Каждому элементу будет назначен блочный параметр person.

Учитывая такой входной массив:

[ { name: 'Yehuda' },
  { name: 'Tom' },
  { name: 'Trek' } ]

Шаблон выше отобразит такой HTML:

<ul>
  <li>Hello, Yehuda!</li>
  <li>Hello, Tom!</li>
  <li>Hello, Trek!</li>
</ul>

Как и другие хелперы, {{#each}} связанный. Если новый элемент будет добавлен в перебранный массив, или удален из него, модель DOM обновится без написания дополнительного кода. При этом Ember требует, чтобы вы использовали специальные методы для обновления связанных массивов. Также учтите, что использование опции key с хелпером each может улучшить производительность при повторном отображении, когда массив будет заменен другим массивом, содержащим похожие элементы.

Получение доступа к index элемента

Во время перебора индекс каждого элемента в массиве предоставляется как второй блочный параметр. Блочные параметры разделяются пробелом, без запятых. Например:

<ul>
  {{#each people as |person index|}}
    <li>Hello, {{person.name}}! You're number {{index}} in line</li>
  {{/each}}
</ul>

Пустые списки

Хелпер {{#each}} может иметь соответствующий {{else}}. Содержимое этого блока отобразится, если переданный хелперу {{#each}} массив будет пустым:

{{#each people as |person|}}
  Hello, {{person.name}}!
{{else}}
  Sorry, nobody is here.
{{/each}}

Комментарии (1)

  1. polin11 12 февраля 2017, 10:51 # 0
    Нужно нарисовать таблицу после того, как пользователь введет размер таблицы
    Решил изменить шаблон game-line.hbs состоит
    {{yield}}
    <strong>Enter number cells=</strong><input type="text" id='get_cells' size='5' value="9" id='get_cells'>
    
    <button {{action "click_button"}}>CLick and get result</button>
    
    
    <table border="1" class='square'>
    {{#each tableRows as |singleRow|}}
       <tr {{action 'clickHandler' singleRow }} >
       {{#each tableCols as |singleCol|}}
        <td class='cell' {{action 'clickHandler' singleCol }} id='{{singleRow}}{{singleCol}}' >
     </td>
    {{/each}}
    </tr>
    {{/each}}
    </table>
    game-line.js состоит
    import Ember from 'ember';
    export default Ember.Component.extend({
        //tableRows:[0,1,2, 3, 4,5,6,7,8],
        //tableCols:[0,1,2, 3, 4,5,6,7,8],
        tableCols:[],
        tableRows:[],
        actions:{
          click_button()
          {
             this.cell=parseInt(get_cells.value);
             for (let i = 0; i < this.cell; i++)
             {
                 this.tableRows.push(i);
                 this.tableCols.push(i);
             } 
          }
       },
    })
    Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.