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

Question

所以，我的容器是 flexbox，我正在尝试使用车把 each 助手渲染组件。问题是 flexbox 只影响它的直接子代，并且 each 助手用 div 包围它生成的每个组件，class 为 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

在您的双向卡片组件中添加这行代码。

...
tagName: ''

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

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

Answer 2

这里是一个无标签组件的小例子：http://www.emberdaily.com/2016/08/31/67-tagless-component/

正如其他人所提到的，each helper 不添加任何包装 HTML。如果您使用无标签组件，重要的是您不能在组件 class.

中使用 class、classNames、classNameBindings 和 attributeBindings

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

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

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

EMBER - Each handler is generating ember-view div around my component

html

handlebars.js

ember.js