ember.js Ember,删除 Package 元素或更改路由className

bfhwhh0e  于 2022-11-05  发布在  其他
关注(0)|答案(4)|浏览(121)

在使用其他框架2年后,我尝试着回到ember.js。对我来说最令人讨厌的“惊喜”是不再有views了,因此我不能使用classNamestagName来定制html元素。为了更详细地说明我的问题是什么:
假设我们已经创建了route,例如/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">在一个新的ember的方式,我如何可以改变class的属性,标签?
谢谢你!

ff29svar

ff29svar1#

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

应用程序/组件/my-list.js:

import Component from '@ember/component';

export default Component.extend({
  tag: 'ul',
  classNames: ['foo']
});

应用程序/模板/组件/我的列表.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文档):

rdlzhqv9

rdlzhqv92#

并不是每一个route都会创建一个div,但ember创建了一个不能修改的根div,这在以前的版本中确实是可以修改的,但现在你不能修改根div的类,也不能禁用它。
然而,其他路由不会创建额外的div。只有一个根div,您不能修改。

hfyxw5xn

hfyxw5xn3#

由于Ember 3.1,您可以使用可选功能删除顶级 Package 器div

可选功能:应用程序模板 Package 程序

ember feature:disable application-template-wrapper

禁用此功能将阻止Ember在应用程序周围创建div。此更改可能需要更改应用程序的CSS,或任何其他依赖于div存在的代码。
此外,启用此功能将提示您选择性地运行codemod,以将应用程序div添加到应用程序的application.hbs中。

ki1q1bka

ki1q1bka4#

上面的答案对我都不起作用,这是一个简单的方法,它将删除所有ember视图标签

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

因为我们是在渲染中这样做的,所以应该在其他所有事情都完成之后,但这可能会破坏插件,所以将其应用于您希望更改的内容而不是整个文档可能会更安全。
我的用例是因为我们要将代码从Rails移植到ember中,所以我们需要保留相同的div结构,这样我们就可以使用所有现有的脚本和css。

相关问题