如何使用ember-cli在组件中加载外部JS文件

Question

我创建了一个带有a的ember应用程序component,我试图找出如何加载存储在vendor组件中app 的dir中的外部JS文件.该组件的代码如下所示,

// app/components/bubbles-page.js

import Ember from 'ember';

export default Ember.Component.extend({

    didInsertElement: function() {
    // this.$() is a scoped selector to the current view

    // bubbles();



    // window.onload = bubbles();

    // the below line gives the following error,
    this.$().bubbles();
    // ERROR
    //TypeError: this.$(...).bubbles is not a function
    // END ERROR
  }

});

而ember-cli-build.js如下所示,

/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    // Add options here

    // 
  });

  // Use `app.import` to add additional libraries to the generated
  // output files.
  //
  // If you need to use different assets in different
  // environments, specify an object as the first parameter. That
  // object's keys should be the environment name and the values
  // should be the asset to use in that environment.
  //
  // If the library that you are including contains AMD or ES6
  // modules that you would like to import into your application
  // please specify an object with the list of modules as keys
  // along with the exports of each module as its value.
  app.import( app.bowerDirectory + '/d3/d3.min.js');
  app.import('vendor/bubbles.js');

  return app.toTree();
};

Answer 1

你ember-cli-build.js似乎还好.

至于你的组件文件,你可以Ember.run.scheduleOnce('afterRender', callback)用来等待DOM渲染,然后调用你的jQuery插件.

此外,通常使用jQuery插件,您必须传递一个jQuery选择器来调用该函数.

请尝试以下方法:

// app/components/bubbles-page.js
import Ember from 'ember';

export default Ember.Component.extend({

    didRender() {
        this.$('.my-bubbles-container').bubbles();
    }

});

替换.my-bubbles-container为您的jQuery选择器.我不熟悉您尝试使用的jQuery插件,但通常是jQuery插件的使用方式.

您可以在[此博客文章] [1]上阅读有关如何初始化jQuery组件的更多信息.

更新的答案

在得知您的bubbles.js文件不是jQuery插件并且它是在全局窗口上运行的函数之后,您可以像这样调用它:

// app/components/bubbles-page.js
import Ember from 'ember';

export default Ember.Component.extend({

    didRender() {
        bubbles();
    }

});

如果您的函数是全局函数,则需要添加/* global bubbles */到组件文件中,或者添加bubbles到文件中的predef数组.jshintrc以避免JSHint错误.