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

【问题标题】：How do I customize the view element for the application.hbs template?如何自定义 application.hbs 模板的视图元素？
【发布时间】：2015-03-20 22:56:16
【问题描述】：

在一个ember-cli生成的app中，application.hbs生成的html被包裹在一个view中：

<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 模板的元素的属性？

【问题讨论】：

标签： ember.js ember-cli

【解决方案1】：

从版本2.x 开始，不推荐使用Ember.View 直接访问。他们所做的是将Ember.View 转换为抽象类。现在你应该使用Ember.Component。作为捷径，你可以试试这样：

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

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

【讨论】：

【解决方案2】：

在app/views 目录中创建一个文件，位于naming conventions、application.js 之后

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>

【讨论】：