Question

我正在尝试在使用其他框架2年后回到ember.js。对我来说最烦人的“惊喜”是不再有views，因此我无法使用classNames或tagName等内容自定义html元素。为了更详细，我将解释我的问题相对于：

让我们假设我们已经创建了路由，例如/myroute。我们templates/myroute.hbs的内容是：

<div>test</div>

好的，让我们使用检查器查看我们的html：

<body class="ember-application">
  <div id="ember341" class="ember-view">
    <div>test</div>
  </div>
</body>

我想知道如何以新的方式删除此元素<div id="ember341" class="ember-view">，如何更改class属性，标记？

谢谢！

Answer 1

我认为您不能删除<div id="ember341" class="ember-view">，因为Ember使用它来管理文档。然而，使用components您可以执行以下操作：

应用/组件/我的-list.js：

import Component from '@ember/component'; export default Component.extend({ tag: 'ul', classNames: ['foo'] });

应用/模板/组件/我的-list.bhs：

<li>Item 1</li> <li>Item 1</li>

要使用此组件，例如在路线中，您可以执行以下操作：

<p>Here is an awesome list:</p> {{my-list}}

哪会生成以下html：

<p>Here is an awesome list:</p> <ul class="foo"> <li>Item 1</li> <li>Item 2</li> </ul>

以下是一些有关如何使用组件的有用文档（来自Ember文档）：

Defining a Component

The Component Lifecycle

Wrapping Content in a Component

Customizing a Component's Element

Answer 2

并非每条路线都会创建div，但是ember会创建一个实际无法修改的单根div。这确实已经改变了，并且在以前的版本中是可能的，但现在你不能改变root div的类，也不能禁用它。

但是其他路线不会创建额外的div。只有一个根div不能修改。

Answer 3

自Ember 3.1起，您可以删除具有可选功能的顶级包装器div。

可选功能：应用程序模板包装器

ember feature:disable application-template-wrapper

禁用此功能将阻止Ember在应用程序周围创建div。此更改可能需要更改应用程序的CSS或依赖div的任何其他代码。

另外，启用此功能将提示您有选择地运行codemod将应用程序div添加到application.hbs。

Answer 4

以上所有答案对我来说都不是一种简单的方法，它可以删除所有ember-view标签

export default Route.extend
  render: ->
     $(document).ready ->
       $("body").find(".ember-view").each (i, item)->
         $(item).contents().unwrap();

因为我们应该在其他所有步骤完成之后才进行渲染，但这可能会破坏附加组件，因此将其仅应用于您要更改的内容而不是整个文档可能更安全。

我的用例是因为我们要将代码从rails移植到ember，因此我们需要保留相同的div结构，以便可以使用所有现有的脚本和CSS。

Ember，删除包装元素或更改路由

4 个答案: