3

Ember 1.0.0-rc.1 を使用してapplication、{{outlet}}. 私の ApplicationView は、CSS の目的でレイアウトとカスタム クラスを利用するように明示的に定義されています。

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

  ApplicationView

ルーターを 2 つのルートに設定しました。一致するテンプレート名を付けて、それらtab1を and と呼びます。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.

これで、metamorph 要素のセットが 1 つだけになり ( を表す{{outlet}}と思います)、新しいember-viewdiv が 1 つだけあります。何が起きてる？明示的なビュー定義が DOM で異なる動作につながるのはなぜですか? これは重要ですか、それとも私が心配する必要のない Ember の内部的なものですか?

4

1 に答える 1

1

ビューは実際の DOM 要素を表し、デフォルトではdiv. Tab1独自のビューを与えて DOM に追加すると、Ember はそれを表す新しいタグを実際に挿入する必要があります。これember265は、html の最後のブロックに表示されるタグです。ビューのプロパティでタグの種類を変更できtagNameますが、省略できません。

編集：

Ember が作成する暗黙的なビューは仮想ビューです。それらは実際には trueプロパティを持ち、要素としてレンダリングされず、またはisVirtualによってアクセスできません。これはハンドルバーのバインディングにも当てはまります。ガイドにはいくつかの情報があります。がどのように仮想でタグなしになるように定義されているかをコードで確認することもできます。parentViewchildViewsEmber._MetamorphEmber._MetamorphView

于 2013-03-03T17:59:23.997 に答える