Question

使用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和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内部的一些我不应该担心的事情？

Answer 1

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

修改

Ember创建的隐式视图是虚拟视图。它们实际上具有真正的isVirtual属性，不会呈现为元素，并且无法由parentView或childViews访问。任何车把绑定也是如此。有一些信息in the guide。您还可以在the code中看到Ember._Metamorph Ember._MetamorphView如何定义为虚拟和无标记。

为什么Ember对明确定义的View有不同的行为？

1 个答案: