如何自定义 application.hbs 模板的视图元素？

Question

在 ember-cli 生成的应用程序中，application.hbs 生成的 html 包装在视图中：

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

如果我创建一个组件，我有一个 component-name.js 文件，我可以在其中指定修改组件的选项：

export default Ember.Component.extend({
  tagName: 'nav',
  classNames: ['main-menu'],
  layout: layout
});

如何修改包装 application.hbs 模板的元素的属性？

Answer 1

在naming conventions、application.js

之后的app/views 目录中创建一个文件

import Ember from "ember";

export default Ember.View.extend({
  classNames: ['my-app-view']
  // this is the application view
});

现在通过检查您的 html:

来确认它是否有效

<body class="ember-application">
  <div id="ember287" class="ember-view my-app-view">
    <h2 id="title">Welcome to Ember.js</h2>
  </div>
</body>

Answer 2

Ember.View 直接访问从版本 2.x 开始被弃用。他们所做的是将 Ember.View 转换为摘要 class。现在你应该使用 Ember.Component。作为捷径，您可以尝试这样的操作：

// app/views/application.js
import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['customClassName']
});

How do I customize the view element for the application.hbs template?