为什么 Ember 对显式定义的视图有不同的行为？答案

【问题标题】：Why does Ember have different behavior for an explicitly defined View?为什么 Ember 对显式定义的视图有不同的行为？
【发布时间】：2013-03-03 08:09:46
【问题描述】：

使用 Ember 1.0.0-rc.1，我有一个仅包含 {{outlet}} 的 application 模板。我的 ApplicationView 被明确定义为利用布局和自定义类来实现 CSS 目的：

define ["ember"], (Ember) ->
  ApplicationView = Ember.View.extend
    classNames: ["application"]
    layoutName: "layout"

  ApplicationView

我的路由器设置了两条路由；称他们为tab1 和tab2，并使用要匹配的模板名称。但是，我没有为这些明确定义视图或控制器，而是更喜欢利用 Ember 的“魔法”。我的期望是当路由器去/tab1时，tab1模板会渲染到ApplicationView的{{outlet}}；与/tab2 相同。

当我运行应用程序时，tab1 模板确实呈现并且元素如下所示：

<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.

当我在/tab1 和tab2 之间来回移动时，内部变质数上升：0、2、3、4 等。接下来，我像这样明确定义 Tab1View：

define ["ember"], (Ember) ->
  Tab1View = Ember.View.extend
    templateName: "tab1"

  Tab1View

我希望这相当于隐含的“魔法”，因为我在这里没有做任何特别特别的事情，而且一切都显示相同。但是，DOM 元素已经不一样了：

<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.

现在只有一组变形元素（我假设代表{{outlet}}）和一个新的ember-view div。这里发生了什么？为什么显式的 View 定义会导致 DOM 中的不同行为？这是重要的，还是只是 Ember 内部的一些我不应该担心的事情？

【问题讨论】：

标签： ember.js

【解决方案1】：

视图代表一个实际的 DOM 元素，默认为 div。当您为Tab1 提供自己的视图并将其附加到 DOM 时，Ember 必须实际插入一个新标签来表示它。这就是您在 html 的最后一个块中看到的 ember265 标记。您可以通过视图的tagName 属性更改标记的类型，但不能省略。

编辑：

Ember 创建的隐式视图是虚拟视图。它们实际上有一个真正的isVirtual 属性，不渲染为元素，并且不能被parentView 或childViews 访问。这也是任何车把绑定的情况。有一些信息in the guide。您还可以在 the code 中看到 Ember._Metamorph 如何将 Ember._MetamorphView 定义为虚拟且无标记。

【讨论】：

我明白了，但我不明白为什么当 Ember 隐式处理视图时不会出现 ember265 div，以及为什么在第二种情况下额外的变形消失了。这让我想知道，通过明确定义视图，我是否以某种方式显着改变了行为。我预计这两种情况会产生相同的 DOM。
上面添加了更多的 cmets。