Question

您好我想知道是否可以告诉ember在根元素后立即初始化？

例如，我有这个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";

有没有办法实现这个目标？

Answer 1

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
};

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标记看起来像<body><div id="existing-content"></body>，而body作为默认根元素，则实例初始化程序将在#ember-container之前添加另一个div #existing-content，并将此标记用作embers根元素。

更新3：你在这里找到了一个蠢货：https://ember-twiddle.com/43cfd1ae978b810f2e7cf445f9a3d40c?openFiles=instance-initializers.root-element.js%2C

如果你检查DOM，你会看到ember根元素被<div id="ember-container"></div>包裹。此包装器附加到rootElement。所以它在rootElement中的任何现有内容之前。我想在ember-twiddle中定义自定义index.html是不可能的，所以我无法证明这一点。但你可以很容易地测试自己。

EmberJs - 有没有办法告诉ember在rootElement之后插入主视图？

1 个答案: