Question

我创建了一个带有component的ember应用程序，我试图找出如何加载存储在组件中app的vendor目录中的外部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();
    }

});

用您的jQuery选择器替换.my-bubbles-container。我不熟悉您尝试使用的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错误。

Answer 2

这可能是一个愚蠢的问题，但是在将导入添加到ember serve后，您是否重新启动了ember-cli-build？在您重新启动之前，不会选择Brocfile或ember-cli-build的更改。

您可以尝试的另一件事是在导入语句中添加{ type: 'vendor'}：app.import('vendor/bubbles.js', {type: 'vendor'});

如何使用ember-cli

2 个答案:

更新回答