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?