Html 余烬-每个处理程序都围绕我的组件生成余烬视图div

因此，我的容器是一个

flexbox

，我正在尝试使用把手

每个

辅助对象渲染组件。问题在于

flexbox

只影响其直接子对象，并且

每个

辅助对象都使用

div

包围它生成的每个组件，该div具有

成员视图

类，我的

flexbox

显然影响了

divs

生成的帮助程序，而不是我的组件

例如：

    {{#bi-board-section}}
        <p class="text text--watermark text--bold">NEW</p>
        {{#each model.orders as |order|}}
            {{bi-order-card order=order}}                
        {{/each}}
    {{/bi-board-section}}

{{{#双板部分}
新的

{{{#每个模型.订单为{订单}
{{bi order card order=order}
{{/每个}}
{{/bi板段}

输出：

---

在仍然使用

每个
助手的情况下，最好的解决方法是什么？
在bi订单卡组件中添加这行代码

...
tagName: ''

这将导致组件无标记。然后，组件将呈现其html，就好像它没有包装在“ember view”div中一样

编辑：每个助手在迭代元素时不会生成任何html。它只是渲染块内的任何内容。另一种可能的解决方案是，您可以将bi order card组件编辑为flex项，而不是使bi order card无标记。这可以通过在component.js中而不是在模板中设置标记名和类来实现。
下面是一个无标记组件的小示例：

正如其他人提到的，each助手不添加任何包装HTML。
如果使用无标记组件，则不能在components类中使用类、类名、类名绑定和属性绑定，这一点很重要

另一个选项是删除卡组件模板的最外层元素，并使用在组件中创建的包装器元素：

export default Component.extend({
    classNames: [ 'card__flipper' ]
})

我想补充一点，即
{{#each
帮助程序在这里绝对没有添加任何DOM，问题是卡片组件需要用于flex元素（设置标记名和类名），或者按照这个答案的建议，它需要是无标记的。