CODEWITHSUNDEEP
ember.jsember-cli
Anthony Nichols
Anthony Nichols

Reputation: 43

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

In an app generated by ember-cli, the html generated by application.hbs is wrapped in a view:

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

If I create a component, I have a component-name.js file where I can specify options to modify the component:

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

How do I modify the attributes of the element that is wrapping the application.hbs template?

Upvotes: 3

Views: 924

Answers (2)

Konstantin Kamkou
Konstantin Kamkou

Reputation: 474

The Ember.View direct access is deprecated starting from version 2.x. What they did, is they have converted the Ember.View to an abstract class. Now you should use Ember.Component. As the short-cut, you could try something like this:

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

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

Upvotes: 4

Robert Carter Mills
Robert Carter Mills

Reputation: 793

create a file in the app/views directory that follows the naming conventions, application.js

import Ember from "ember";

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

Now confirm it works by inspecting your html:

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

Upvotes: 2

Related Questions