EmberJs - rootElementの後にメインビューを挿入するようemberに指示する方法はありますか？

Question

こんにちは私は、エバーがルート要素の直後に初期化するように指示する方法があるかどうかを知りたいですか？例えば

私はこのDOMの構造を有する：

<div id="#bodyContent" class="ember-application"> 
    <div data-name="ContentPlaceHolderMain"> 
    </div> 
    <div id="ember357" class="ember-view"> 
    </div> 
</div> 

をしかし、私はエンバーは、DOMの最初になりたい：私のenviroment.jsで

<div id="#bodyContent" class="ember-application"> 
    <div id="ember357" class="ember-view"> 
    </div> 
    <div data-name="ContentPlaceHolderMain"> 
    </div> 
</div> 

私はこのラインを持っているファイル：

ENV.APP.rootElement = "#bodyContent"; 

これを達成する方法はありますか？

Answer 1

EmberはappendToを使用してルート要素内にそのビューを挿入します。しかし、emberインスタンスのdidCreateRootViewを無効にして、prependToを使用するように変更することができます。どのように見てくださいFastboot does this。

更新：didCreateRootViewを上書きするインスタンスイニシャライザです。

export function initialize(appInstance) { 
    appInstance.didCreateRootView = function(view) { 
    // overwrite didCreateRootView 
    }; 
} 

export default { 
    name: 'prepend-to', 
    initialize 
}; 

ember/glimmerはprependToメソッドを提供しない。あなたはappendToの実装に続いてそれ自身で実装する必要があります。

didCreateRootViewはプライベートフックです。時間の経過とともに安定していくとは思わないでください。

一般的には、目標を達成するための方法が他にある場合は、このパスに進まないことをおすすめします。希望の位置にエバー用の容器を追加することを検討してください。 HTMLマークアップを制御できない場合は、emberを初期化する前にjQueryを使用してコンテナを追加することができます。

アップデート2：

import jQuery from 'jquery'; 

export function initialize(appInstance) { 
    appInstance.didCreateRootView = function(view) { 
    let containerId = 'ember-container'; 
    jQuery('<div>').prop('id', containerId).prependTo(jQuery(this.rootElement)); 
    view.appendTo(`#${containerId}`); 
    }; 
} 

export default { 
    name: 'prepend-to', 
    initialize 
}; 

これはあなたが求めてきましたが、それは達成するためにはるかに簡単です正確に何ではありません。 のようなHTMLマークアップと、インスタンス初期化子の上のデフォルトのルート要素としてのボディが#existing-contentの前にもう1つのdiv #ember-containerを追加し、これを追加のルート要素として使用します。

アップデート3： あなたがここに燃えさし-ひねり見つける：https://ember-twiddle.com/43cfd1ae978b810f2e7cf445f9a3d40c?openFiles=instance-initializers.root-element.js%2C

あなたはDOMを調べる場合は、その燃えさしのルート要素が<div id="ember-container"></div>で包まれているが表示されます。このラッパーはrootElementに追加されます。したがって、既存のコンテンツの前には、rootElementがあります。私はember-twiddleにカスタムindex.htmlを定義することはできないと思いますので、私はこれを実証することはできません。しかし、あなたは簡単に自分自身をテストすることができます。