gpt4 book ai didi

ember.js - 为什么 Ember 对于明确定义的 View 有不同的行为?

转载 作者:行者123 更新时间:2023-12-01 08:27:55 25 4
gpt4 key购买 nike

使用 Ember 1.0.0-rc.1,我有一个只包含 {{outlet}}application 模板。我的 ApplicationView 被明确定义为利用布局和用于 CSS 目的的自定义类:

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

ApplicationView

我的路由器设置了两条路由;将它们称为 tab1tab2,并使用匹配的模板名称。然而,我没有为它们明确定义 View 或 Controller ,而是更愿意利用 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.

当我在 /tab1tab2 之间来回移动时,内部变形数上升: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 内部问题?

最佳答案

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

编辑:

Ember 创建的隐式 View 是虚拟 View 。它们实际上具有真正的 isVirtual 属性,不呈现为元素,并且不能被 parentViewchildViews 访问。这也是任何 Handlebars 绑定(bind)的情况。有资料in the guide .您还可以在the code中看到对于 Ember._Metamorph Ember._MetamorphView 是如何定义为虚拟和无标签的。

关于ember.js - 为什么 Ember 对于明确定义的 View 有不同的行为?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15183730/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com