Question

我正在制作样式指南，需要遍历车把模板中的数组。

我知道您可以在传递到模板中时遍历对象或其他变量，但是有没有办法遍历模板中定义的集合？我认为这打破了把手推动的“无逻辑的视图”概念，但是我认为这是一个常见的用例。

{{#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}}

我希望它能输出banners-container元素的4个集合，但不会输出任何东西。

处理此用例的最佳方法是什么？

Answer 1

您可以使用array中的ember-composable-helpers帮助器直接在模板中组成数组：

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

Answer 2

您可以在controller/component文件中定义数组，并在property中使用hbs。说

app/controllers/application.js

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

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

在您的app / templates / application.hbs中

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

您可以看看ember native array function

有没有办法在余烬车把模板中定义和遍历数组？

2 个答案: