CODEWITHSUNDEEP
ember.js
Svetlana Linuxenko
Svetlana Linuxenko

Reputation: 476

Ember, remove wrapping element or change classNames for route

I'm trying come back to ember.js after 2 years working with another frameworks. Most annoying "surprise" for me is there no views anymore, therefore i cannot customize html elements using something like classNames or tagName. To be more detailed I'll explain what is my problem relative for:

Lets pretend we have created route, /myroute for instance. Content of our templates/myroute.hbs is:

<div>test</div>

Ok, lets see our html using inspector:

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

I'd like to know how i can remove this element <div id="ember341" class="ember-view"> in a new ember way, how i can change class property, tag ?

Thanks !

Upvotes: 3

Views: 2233

Answers (4)

Simon
Simon

Reputation: 762

None of the answers above worked for me here is a simple way this will remove all ember-view tags

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

Because we are doing this in render it should be after everything else is complete, but its possible this may break addons and so may be safer to apply this just to the content you wish to change rather than the whole document.

My use case was because we were porting code from rails into ember and so we needed to preserve the same div structure so we could use all our existing scripts and css.

Upvotes: 0

esbanarango
esbanarango

Reputation: 1637

Since Ember 3.1 you can remove the top level wrapper div, with an optional-feature.

Optional Feature: Application Template Wrapper

ember feature:disable application-template-wrapper

Disabling this feature will stop Ember from creating a div around the application. This change may require alterations to your application's CSS, or to any other code that depends upon the presence of the div.

Additionally, enabling this feature will prompt you to optionally run a codemod to add the application div to the application.hbs of your application.

Upvotes: 1

Lux
Lux

Reputation: 18240

Not every route does create a div but ember creates a single root div that actually cant be modified. This has indeed changed and was possible in previous versions, but now you cant change the class of the root div nor disable it.

However other routes do not create additional divs. There is only a single root div you cant modify.

Upvotes: 1

feupeu
feupeu

Reputation: 919

I don't think you can remove <div id="ember341" class="ember-view"> since Ember uses it to manage the document. However, using components you are able to do something like this:

app/components/my-list.js:

import Component from '@ember/component';

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

app/templates/components/my-list.bhs:

<li>Item 1</li>
<li>Item 1</li>

To use this component, for instance in a route, you could do the following:

<p>Here is an awesome list:</p>
{{my-list}}

Which would generate the following html:

<p>Here is an awesome list:</p>
<ul class="foo">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Here are some useful documentation on how to use components (from the Ember documentation):

Upvotes: 1

Related Questions