Question

我有一个 Ember 2.3.0 应用程序。初始化应用程序时，Ember创建一个根div，其中插入了我创建的所有内容。这个div看起来像这样：

<div id="ember351" class="ember-view"></div>

此元素是<body>元素的第一个孩子。我需要能够设置此div的类。

我该怎么做？

Answer 1

也许您不需要class内的div，但您可以从 CSS 或 JavaScript <{}获取div / em>的

您可以通过 CSS 访问div，如此

body > .ember-view

或通过 JavaScript 这样

document.querySelector('body > .ember-view')

更新在Ember中，它会是这样的。

将应用程序控制器中的init挂钩与Ember.run.next function结合使用。

// application/controller.js import Ember from 'ember'; const { Controller, run { next } } = Ember; export defaultController.extend({ addClass() => { next(this, function() { document.querySelector('body > .ember-view').className += " your-class"; }) }.on('init') });

这是demo in ember twiddle。

Answer 2

目前你不能与香草Ember.js 2.3。您需要安装Cache-Control:public Connection:close Content-Type:application/json Date:Wed, 27 Jan 2016 15:20:04 GMT Expires:Wed, 27 Jan 2016 15:25:04 GMT，然后自定义应用程序视图，如Customizing a View's Element所示。

Answer 3

使用以下内容创建views / application.js文件，

value

不确定使用组件作为视图的副作用是什么

Answer 4

使用body > .ember-view之类的选择器解决问题在开发中运行良好，但如果您的生活，呃，测试依赖于它，那么将无效，因为Ember将应用程序安装到在测试环境中页面不同。

而不是......

<body>
  <div class="ember-view">
    <!-- app -->
  </div>
</body>

......它安装为......

<body>
  <div id="ember-testing-container">
    <div id="ember-testing">
      <div class="ember-view">
        <!-- app -->
      </div>
    </div>
  </div>
</body>

对于大多数人来说，这可能不是一个问题，但对我来说这是 - 我将一个插件附加到通过body > .ember-view选择的根应用程序，但这不起作用。

我可以使用.ember-view:eq(0)来抓取页面上的第一个.ember-view - 应用。

Answer 5

在Ember 2.7及以下版本中，您可以通过修改Ember应用程序来控制顶级标记（甚至不渲染它）及其CSS类：

// app/app.js

App = Ember.Application.extend({
  ApplicationView: Ember.Component.extend({
    classNames: ['my-custom-classname'],
    // Or to omit the tag entirely:
    tagName: '',
  }),
});

如this discussion中所示，并已回答here。

如何在Ember应用程序中设置根div的类？

5 个答案: