Add documentation for tagName: '' option on view.

[hrishikeshs]

I found that specifying tagName: '' on a view will not wrap the generated html in a 'div'. Since I've had to do this a couple of times and there was no documentation about this, thought I'd add it.

[rwjblue]

I believe that the appropriate way to do this is inherit from Ember._MetamorphView (which does set the tagName to '', but also a few other things.

[recipher]

I'll give this a whirl. Seems kinda hacky. I found that if I specified tagName to '', then it had side effects - the view contents were duplicated elsewhere as I moved to other views.

I'm going to try this to see what happens, but I've worked out how to change my (semantic-ui) layout to solve the problem I was having.

[recipher]

Yep, that solved the side-effects. Thanks.

[hrishikeshs]

@rjackson Thanks for that. Do you want me to update the PR by documenting your comment somewhere?

[rwjblue]

@hrishikeshs - I am unsure. Ember._MetamorphView is marked as private in the API docs (and based on the underscore in its name).

@tomdale - Do you have a problem with documenting usage of _MetamorphView? I assume its name and private status were intentional.

[recipher]

The interesting this here, is why _MetamorphView (or tagName: '') is
necessary.

In my case, it was because I had 2 templates, that had this HTML structure:

<div>...</div>
<div>...</div>

But if I created a View for one of them, I got this instead:

<div class='ember-view'>
  <div>...</div>
  <div>...</div>
</div>

And my layout broke. I'm now reworking my layout to make this not a
possibility. But if I use _MetamorphView, then I don't get the wrapping
div and my HTML stays the same View or not.

I'm wondering why a View-less template doesn't get wrapped in a <div class='ember-view'> by default?

On 3 May 2014 12:55, Robert Jackson [email protected] wrote:

@hrishikeshs https://github.com/hrishikeshs - I am unsure.
Ember._MetamorphView is marked as private in the API docs (and based on
the underscore in its name).

@tomdale https://github.com/tomdale - Do you have a problem with
documenting usage of _MetamorphView? I assume its name and private status
were intentional.

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/4790#issuecomment-42103160
.

[rwjblue]

Every view instance is wrapped in a tag so that Ember can find the view in the DOM quickly, by default that tag is a <div>, and as you know that can be configured via tagName. When tagName is blank, Ember uses <script> tags (which are not considered for markup and/or styling).

A template is rendered by a view, so it definitely is wrapped the same way. Lets assume you have a post route, when you navigate to the post route the PostView is used to render the post template. The PostView is most definitely wrapped, but since it is a virtual view it inherits from _MetamorphView and uses <script> tags instead of <div>'s.

Please inspect the DOM (and the resolver logging to show what views are looked up) in: http://emberjs.jsbin.com/meyit/1/edit

[recipher]

​Right-o. I get it now. I'd been inspecting the DOM but didn't realise that
the <script> was the alternative to the

So, essentially, inheriting from _MetamorphView​ makes the View-backed
template the same as the non-View-backed template.

This seems like a valid scenario to me, even though _MetamorphView is
private. I wonder how/if this changes when HTMLBars is released?

On 3 May 2014 13:46, Robert Jackson [email protected] wrote:

Every view instance is wrapped in a tag so that Ember can find the view in
the DOM quickly, by default that tag is a

, and as you know that can
be configured via tagName. When tagName is blank, Ember uses <script>tags (which are not considered for markup and/or styling).

A template is rendered by a view, so it definitely is wrapped the same
way. Lets assume you have a post route, when you navigate to the postroute the
PostView is used to render the post template. The PostView is most
definitely wrapped, but since it is a virtual view it inherits from
_MetamorphView and uses <script> tags instead of

's.

Please inspect the DOM (and the resolver logging to show what views are
looked up) in: http://emberjs.jsbin.com/meyit/1/edit

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/4790#issuecomment-42104238
.

[rwjblue]

Just to be clear, there are no non-view backed templates. All templates are rendered by views.

The difference here is that auto-generated views are virtual so they inherit from _MetamorphView instead of Ember.View (which is what you would inherit from in your app).

[recipher]

Perfect, thanks. By non-View-backed, I mean virtual.

Maybe setting a virtual: true property on the View, would be nicer than
inheriting from _MetamorphView (or setting tagName: ''), if such a scenario
was supported, that is?

On 3 May 2014 13:54, Robert Jackson [email protected] wrote:

Just to be clear, there are no non-view backed templates. All templates
are rendered by views.

The difference here is that auto-generated views are virtual so they
inherit from _MetamorphView instead of Ember.View (which is what you
would inherit from in your app).

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/4790#issuecomment-42104402
.

[rwjblue]

@tomdale / @trek - Do you have a problem with documenting usage of _MetamorphView? I assume its name and private status were intentional, but I am not sure how else to get this functionality without rewriting it in our apps...

[krisselden]

@rjackson in the metal-views branch, you can set tagName to '' and isVirtual without side-effects and _MetamorphView is going away.

[trek]

Closing. _MetamorphView can't be considered an official solution sine it would break when metal-views lands and the private class goes away (which is why we kept it private). I think we'll just consider this a bug that metal-views will address.

[ofersadgat]

@trek Is there an official solution for this?

[tomdale]

@ofersadgat You can set tagName to '' on any component.

[sourvb]

Any update on this? I am setting tagName="" in my component. But I cannot access the DOM by this.$(). The default tagName (div) is ruining my template style. Is there any solution for this?

[tomdale]

@sourvb There is not any work at the moment on supporting this.$() for tagless components. That said, if the reason you are using a tagless component is due to CSS issues, I suspect there are ways to style a div to not affect the style of child elements.

[sourvb]

This seems like the same as #12500

[miguelcobain]

@tomdale there is work done on #12500. It would be great if the core team could either close it or accept it. No rush, though. :)

[gnapse]

What if I want to use this.$('.selector') to address elements in my component's template, and not to address the root component element as in this.$(). I agree the latter makes no sense under tagName: '', but the former example does.

[vibestring]

example of use case on a component. (ember 2.0 with modern ES6 js)

import Component from '@ember/component';

export default Component.extend({
    tagName: ''
});