如何在EmberJS应用程序中使用Jitsi Meet

Question

在我的Ember应用程序中,我使用的是我安装的ember-inject-script:

npm install --save-dev ember-inject-script

我的页面的controller.js文件如下所示:

import Ember from 'ember';
import injectScript from 'ember-inject-script';

export default Ember.Controller.extend({
  init: function() {
    this._super();
    var url = "https://meet.jit.si/external_api.js";
    injectScript(url);
    var domain = "meet.jit.si";
    var room = "JitsiMeetAPIExample";
    var width = 700;
    var height = 700;
    var htmlElement = document.querySelector('#meet');
    var api = new JitsiMeetExternalAPI(domain, room, width, height, 
              htmlElement);
  }
});

模板是这样的:

<h2>Jitsi Meet</h2>
<div id="meet"></div>
{{outlet}}

但我得到一个控制台错误:

处理路径时出错: projects.index未定义JitsiMeetExternalAPI ReferenceError:未定义JitsiMeetExternalAPI

Answer 1

• injectScript异步，所以你不能使用JitsiMeetExternalAPI下一个语句。你需要使用then.

• 另一个问题是，您正在控制器 init 方法中访问 DOM 元素，该方法将不可用。通常控制器不支持 DOM。为此我会鼓励你编写组件并使用didInsertElement钩子

另一种在所需时间加载 js 的替代方法是在路由 beforeModel 挂钩中，您可以只使用 Ember.$.getJSON(url)。

beforeModel(){
 return Ember.$.getJSON(url);
}