javascript - 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真正生成一个封闭的 <div id="ember666" class="ember-view"></div>对于每个 {{outlet}} ??

---

为什么 Ember.js这样处理？我怎样才能防止它呈现 App.ApplicationView两次？ 而且，除此之外，是 Ember.js真正生成一个封闭的 <div id="ember666" class="ember-view"></div>对于每个 {{outlet}} ？ (我在我的应用程序中看到了这种行为)

Answer 1

默认情况下，是 {{outlet}}会将您的模板附在 <div> 中.但是，您可以通过在 socket 上指定 View 类并定义 View 类'tagName 来更改该行为。属性(property)给任何你想要的。

例如，导出

{{outlet viewClass=App.HeaderContainer}}

有风景

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

会将 socket 包裹在 <header> 中标签。