Блог

Главная - Вопросы по программированию - Есть ли способ определить и выполнить итерацию по массиву в шаблонах ember handlebars?

Есть ли способ определить и выполнить итерацию по массиву в шаблонах ember handlebars?

#ember.js #handlebars.js

#ember.js #handlebars.js

Вопрос:

Я работаю над руководством по стилю, и мне нужно выполнить итерацию по массиву в шаблоне handlebars.

Я знаю, что вы можете выполнять итерацию по объектам или другим переменным при передаче в шаблон, но есть ли способ выполнить итерацию по коллекции, определенной в шаблоне? Я думаю, что это нарушает концепцию «отсутствия логики в представлениях», которую использует handlebars, но я полагаю, что это обычный вариант использования. 

 {{#each ['success', 'warning', 'error', 'info'] key="@index" as |type|}}
  <div class='banners-container'>
    <div class='content'>
      <div class='banner banner-{{type}} has-icon has-dismiss'>
        <p>Banner {{type}}</p>
      </div>
    </div>
  </div>
{{/each}}

Я ожидал бы, что это выведет 4 коллекции banners-container элементов, но это ничего не выводит.

Каков наилучший способ справиться с этим вариантом использования?

Комментарии:

1. collection defined in the template ? Я не понимаю. Вы хотите определить коллекцию в шаблоне?

Ответ №1:

Вы можете использовать помощник по массиву из ember-composable-helpers для создания массивов непосредственно в шаблоне:

 {{#each (array 1 2 3) as |numbers|}}
  {{numbers}}
{{/each}}

Ответ №2:

вы можете определить свой массив в своих controller/component файлах и использовать его property в hbs . say

app/controllers/application.js 

 import Controller from '@ember/controller';
import { A } from '@ember/array';

export default Controller.extend({
  status: A(['success', 'warning', 'error', 'info']),
})

в вашем приложении / templates /application.hbs

 {{#each status as |type|}}
  {{type}}
{{/each}}

Вы можете взглянуть на встроенную функцию массива ember