EmberJs - Есть ли способ сказать ember, чтобы вставить основной вид после rootElement?

Привет, я хотел бы узнать, является ли способ сказать ember для инициализации сразу после корневого элемента?EmberJs - Есть ли способ сказать ember, чтобы вставить основной вид после rootElement?

Например, у меня есть эта структура: DOM

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

Но я хочу уголек быть первым на DOM:

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

В моем enviroment.js файл, который я есть эта строка:

ENV.APP.rootElement = "#bodyContent";

Есть ли способ достичь этого?

источник

2017-01-31 DeividKamui

Ember использует appendTo, чтобы вставить его вид внутри корневого элемента. Но вы можете переопределить didCreateRootView экземпляра ember и изменить его на использование prependTo. Посмотрите, как Fastboot does this.

Обновление: Это инициализатор экземпляра для перезаписывания didCreateRootView.

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

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

уголек/проблеск не обеспечивает prependTo метод. Вы должны реализовать это самостоятельно самостоятельно после реализации appendTo.

Также обратите внимание, что didCreateRootView является частным крюком. Не ожидайте, что со временем сохранить стабильность.

В общем, я бы не рекомендовал идти по этому пути, если есть какой-либо другой способ достижения вашей цели. Пожалуйста, подумайте о добавлении контейнера для ember в желаемое положение. Если у вас нет контроля над разметкой HTML, вы можете добавить контейнер, используя jQuery, перед инициализацией ember.

Update 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-разметка выглядит как <body><div id="existing-content"></body>, а тело в качестве корневого элемента по умолчанию выше инициализатора экземпляра, то добавляется еще один div #ember-container до #existing-content и с использованием этого в качестве элемента корня углей.

Update 3: Вы найдете уголек-вертеть здесь: https://ember-twiddle.com/43cfd1ae978b810f2e7cf445f9a3d40c?openFiles=instance-initializers.root-element.js%2C

Если инспектировать DOM вы увидите, что уголек корневой элемент обернут <div id="ember-container"></div>. Эта оболочка добавляется к rootElement. Таким образом, это до любого существующего контента в rootElement. Я думаю, что невозможно определить пользовательский index.html в ember-twiddle, поэтому я не могу это продемонстрировать. Но вы можете легко проверить себя.

источник

2017-01-31 13:07:07 jelhan

Куда я должен поместить этот код? – DeividKamui

@DeividKamui обновил мой ответ более примером кода и заметьте о гораздо более легком подходе, который может быть приемлемым для вас. – jelhan

Хорошо, позвольте мне попробовать. – DeividKamui

EmberJs - Есть ли способ сказать ember, чтобы вставить основной вид после rootElement?

ответ

Смежные вопросы