ember-cli 2.13 中的应用程序 view/component

Question

我最近使用最新的 ember-cli（主题中所述的 v 2.13）开始了一个新项目。我更愿意生成干净的语义 html，因此不喜欢应用程序生成的额外 div.ember-view。

在我创建具有以下内容的 app/views/application.js 文件之前：

import Ember from 'ember';
export default Ember.Component.extend({
    tagName: ''
});

它只是将组件用作应用程序视图并删除了根标记，但它似乎不再起作用了。事实上，在调试解析器时 "view:application" 根本没有出现。有没有解决这种情况的新方法？ Afaik 可路由组件还没有完全加入，是吗？

当然，我的最后一个 ember 项目使用的是 ember-rails（使用 ember 2.7），现在我要使用纯 ember-cli 项目，所以有些事情可能确实发生了变化。

现在怎么能达到同样的效果呢？这只是向解析器添加特殊规则的情况吗？或者也许可以通过其他方式到达？我了解到 ember 文档在涉及新的晦涩功能时可能会相当缺乏...

Answer 1

视图在 Ember > 2.0 中已弃用。这些组件会生成 div 添加了 div.ember-view class。您可以使用 classNames 属性为该组件提供自定义 classes，并且该组件不是 div , 指定元素到 tagName 属性.

可以使用每个组件内的 tagName: " " 消除多余的 div，但您不能使用 this.$() 访问组件元素。唯一的选择就是自定义根据我们的需要创建的div。

对于应用程序模板，我认为没有任何 hack 可以消除额外创建的 div。 eventDispatcher 可能需要它。

Answer 2

Views 已从 Ember 2.0 API 中删除。看看这个弃用 https://emberjs.com/deprecations/v1.x/#toc_ember-view.

关于你的问题，你可以在下面url找到相关的讨论。 https://github.com/emberjs/ember.js/issues/11486

不建议实施 tagName: ''。 在当前情况下，您无法删除由 ember 应用程序 创建的额外 div，因为 ember 需要它。你可以做的是，你可以应用 CSS 样式来缓解这种情况，

:root,
.ember-application,
.ember-application>div {
    height: 100%;
}

application view/component in ember-cli 2.13