Ember.js View without Wrapping Div?

Question

I have a 3 column layout in my app. I'm using Semantic UI. So, the layout is:

<div class='ui celled grid'>
  <div class='left column'>...</div>
  <div class='middle column'>...</div>
  <div class='right column'>...</div>
</div>

So, straightforward.

In my application.hbs it is simply:

<div class='ui celled grid'>
  <div class='left column'><!-- menu --></div>
  {{outlet}}
</div>

And the other 2 columns are in my sub-controller/templates. And this works fine until I need a View. If I need a View, then Ember makes the HTML layout become:

<div class='ui celled grid'>
  <div class='left column'><!-- menu --></div>
  <div class='ember-view'>
    <div class='middle column'><!-- content --></div>
    <div class='right column'><!-- content --></div>
  </div>
</div>

And the wrapping <div class='ember-view'> breaks my layout. Because I don't always need a View I need a way to make the HTML the same for with or without a View.

At this point, I see 2 solutions. I'll either have to rework my layout in some way (that I'm yet to work out). Or I can get rid of the wrapping div.

But is it possible to get rid of the wrapping div? I tried this:

export default Ember.View.extend({
  tagName: null
});

But that doesn't work. I also tried a span, but that still breaks my layout.

Any ideas?

Thanks.

Answer 1

Try using

tagName:''

The empty string as the tagName's value on your view.

Update: When I brought this to the attention of ember.js contributors, they suggested inheriting the view from

Ember._MetamorphView

https://github.com/emberjs/ember.js/pull/4790