0

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

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

我声明了一个application.hbsHandlebars 模板，它呈现了我的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将. 当我现在检查 DOM 时，我可以看到它被渲染了两次（也被装箱了）：classNamesApp.ApplicationViewApp.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}}? （我在我的应用程序中看到了这种行为）

4

1 回答 1

1

默认情况下，yes{{outlet}}会将您的模板包含在<div>. 但是，您可以通过在插座上指定视图类并将视图类的tagName属性定义为您想要的任何内容来更改该行为。

例如，出口

{{outlet viewClass=App.HeaderContainer}}

有视野

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

将插座包装在<header>标签中。

于 2013-11-15T13:42:39.957 回答