#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