html - EMBER - 每个处理程序都围绕我的组件生成 ember-view div

Question

因此，我的容器是一个 flexbox，我正在尝试使用 handlebars each 助手来呈现组件。问题是 flexbox 只影响它的直接子元素，而且 each 助手用一个 div 包围它生成的每个组件，它具有ember-view 类，我的 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}}

输出:

在仍然使用 each 助手的情况下最好解决这个问题的方法是什么？

Answer 1

在您的 bi-order-card 组件中添加这行代码。

...
tagName: ''

这将使组件成为无标签的。然后该组件将呈现它的 html，就好像它没有包装在“ember-view”div 中一样。

编辑: #each 助手在遍历元素时不会生成任何 html。它只是渲染 block 内的任何内容。另一种可能的解决方案不是使双向订单卡无标签，而是可以将双向订单卡组件编辑为弹性项目。这可以通过在 component.js 中而不是在模板中设置标签名称和类来完成。