3

使用 Ember 1.0.0-rc.1，我有一个application只包含{{outlet}}. 我的 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当我在and之间来回移动时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-viewdiv。这里发生了什么？为什么显式的 View 定义会导致 DOM 中的不同行为？这是重要的还是只是 Ember 内部的一些我不应该担心的事情？

4

1 回答 1

1

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

编辑：

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

于 2013-03-03T17:59:23.997 回答