Ember.js-应用 <div/> 被渲染两次？

Question

我正在使用以下Ember.js堆栈：

DEBUG: ------------------------------- 
DEBUG: Ember      : 1.1.2 
DEBUG: Handlebars : 1.0.0 
DEBUG: jQuery     : 2.0.2 
DEBUG: ------------------------------- 

我声明了一个application.hbs Handlebars模板，该模板呈现了我的App.ApplicationView

{{#view App.ApplicationView}}
  {{outlet 'modal'}} {{outlet 'notificationCollection'}}
  {{#if isUserAuthenticated}}
    {{render sidemenu authenticationState=isAuthenticated}}

    {{outlet 'upperNotification'}}

    <div id="main" class="main">
      {{outlet}}
    </div>
  {{else}}
    {{outlet}}
  {{/if}}
{{/view}}

和用于调试目的我添加了gotcha的classNames的阵列App.ApplicationView 。 现在，当我检查DOM时，可以看到App.ApplicationView呈现了两次（也被装箱）：

...
<div id="appRoot" class="ember-application">
  <div id="ember444" class="ember-view gotcha">
    <div id="ember445" class="ember-view gotcha">
      ...more content..
    </div>
  </div>
</div>
...

编辑：我应该先尝试一下，然后再将其发布到此处stackoverflow ...如果我删除了{{#view App.ApplicationView}}{{/view}}声明，它只会被渲染一次，正如预期的那样;）

因此，对我来说仍然是一个奇迹的问题是Ember.js确实为每个{{outlet}}生成了一个封闭的<div id="ember666" class="ember-view"></div> ？

---

为什么 Ember.js处理？ 如何防止它两次渲染 App.ApplicationView ？ 而且，除此之外， Ember.js真的为每个{{outlet}}生成一个封闭的<div id="ember666" class="ember-view"></div>吗？ （我在应用程序中看到了这种行为）

Answer 1

默认情况下，是{{outlet}}会将模板包含在<div> 。 但是，您可以通过在插座上指定视图类并将视图类的tagName属性定义为所需的名称来更改该行为。

例如出口

{{outlet viewClass=App.HeaderContainer}}

带视图

App.HeaderContainer = Ember.ContainerView.extend({
  tagName: 'header'
});

将出口包装在<header>标签中。