Question

我正在使用第三方库，该库提供自己的全局“就绪”功能。我正在创建一个Ember组件，在我的didInsertElement函数中执行某些代码之前，需要等到这个就绪函数被调用。在调用didInsertElement代码之前，我怎么能等到这个全局就绪函数执行？

// index.html
<script src="https://cdn.example.com/library.js"></script>
<script>
function thirdPartyReady() {
  // Do something here. Maybe window.thirdPartyReady = true ?
}
</script>

// my-component.js
export default Ember.Component.extend({
  didInsertElement() {
    this._super(...arguments);
    // wait until thirdPartyReady before using it on this element
  }
});

Answer 1

我看到两种可能的解决方案。

一种方法是用自己的方式覆盖第三方功能，同时保留原件的副本，使其正常执行。这取决于您是否有权访问余烬函数的参考。这在其函数实际上包含在JS文件中的情况下非常有用。

基本上你会这样做：

//Already defined function:
function thirdPartyReady(){
  //Blah blah
}

var originalThirdPartyReady = thirdPartyReady;
thirdPartyReady = function(){
  originalThirdPartyReady();
  //Call your Ember component here
}

您拥有的另一个选项是在组件中设置一个回调函数，该函数在调用ready函数后执行。如果您没有对可用组件的引用，这将非常有用：

window.3rdCallback = null;

function thirdPartyReady(){
  //Body of thirdPartyReady goes here
  if(window.3rdCallback) 
    window.3rdCallback();
}

然后你必须在组件的初始化中做一些事情设置

window.3rdCallback = () => this.didInsertElement();

此方法的好处是不必在组件范围之外维护组件的副本。

Answer 2

查看PromiseProxyMixin。您可以将其混合到组件中，也可以在组件上创建属性。一旦＆＃34;第三方准备就绪，您就可以在此promise定义resolve＆＃34;事件发生，（可能使用轮询或async操作）。您可以在init或didInsertElement中初始化承诺并添加侦听器以检查该事件。 PromiseProxy允许您使用isPending，isFulfilled等等基于承诺的状态对/显示状态。

我以前做过类似的事情并使用ember-cli-inline-content在构建的index.html文件中注入额外的javascript。

如何等待Ember之外的全球/事件？

2 个答案: