Why does Ember have different behavior for an explicitly defined View?

Question

Using Ember 1.0.0-rc.1, I have an application template that just contains {{outlet}}. My ApplicationView is explicitly defined to take advantage of a layout and a custom class for CSS purposes:

define ["ember"], (Ember) ->
  ApplicationView = Ember.View.extend
    classNames: ["application"]
    layoutName: "layout"

  ApplicationView

I have my router set up to with two routes; call them tab1 and tab2, with template names to match. I have not explicitly defined Views or Controllers for these, however, preferring instead to take advantage of Ember's "magic." My expectation is that when the router goes to /tab1, the tab1 template will render into the ApplicationView's {{outlet}}; same with /tab2.

When I run the app, the tab1 template does indeed render and the elements look like this:

<body class="ember-application">
    <div id="ember229" class="ember-view application">
        <div class="navbar navbar-inverse navbar-fixed-top">...</div>  <!-- layout -->
        <div class="wrapper"> <!-- layout -->
            <script id="metamorph-1-start" type="text/x-placeholder"></script>
            <script id="metamorph-0-start" type="text/x-placeholder"></script>
            Tab 1 Content
            <script id="metamorph-0-end" type="text/x-placeholder"></script>
            <script id="metamorph-1-end" type="text/x-placeholder"></script>
etc.

As I move back and forth between /tab1 and tab2, the inner metamorph number goes up: 0, 2, 3, 4, etc. Next, I explicitly define Tab1View like this:

define ["ember"], (Ember) ->
  Tab1View = Ember.View.extend
    templateName: "tab1"

  Tab1View

I expected that this would be equivalent to the implicit "magic" since I'm not doing anything particularly special here, and everything displays the same. However, the DOM elements aren't the same anymore:

<body class="ember-application">
    <div id="ember229" class="ember-view application">
        <div class="navbar navbar-inverse navbar-fixed-top">...</div>
        <div class="wrapper">
            <script id="metamorph-0-start" type="text/x-placeholder"></script>
            <div id="ember265" class="ember-view">
                Tab 1 Content
            </div>
            <script id="metamorph-0-end" type="text/x-placeholder"></script>
etc.

Now there's only one set of metamorph elements (representing {{outlet}}, I assume) and a new ember-view div. What's going on here? Why does the explicit View definition lead to different behavior in the DOM? Is this important or just something internal to Ember that I shouldn't worry about?

ahmacleod ahmacleod · Accepted Answer · 2013-03-03T17:59:23

A view represents an actual DOM element, by default a div. When you give Tab1 its own view and append it to the DOM, Ember has to actually insert a new tag to represent it. That's the ember265 tag that you see in the last block of html. You can change what type of tag that is by the tagName property of the view, but you can't omit it.

Edit:

The implicit views that Ember creates are virtual views. They actually have a true isVirtual property, don't render as elements, and can't be accessed by parentView or childViews. This is also the case for any handlebars binding. There is some information in the guide. You can also see in the code for Ember._Metamorph how Ember._MetamorphView is defined to be virtual and tag-less.

Why does Ember have different behavior for an explicitly defined View?

1 Answers