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>中。但是，您可以通过在插座上指定视图类并将视图类“tagName属性定义为您想要的任何内容来更改该行为。

例如，插座

{{outlet viewClass=App.HeaderContainer}}

使用视图

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

会将插座换成<header>标签。

Ember.js - 应用程序<div>呈现两次？</div>

1 个答案: