我目前正在使用 Ember.js。

我在将一些库导入我的应用程序时遇到了一些问题。首先我下载了​​这个库 http://www.acme.com/javascript/Clusterer2.js 之后我正在阅读这个 Importing Javascript 中的所有文档。
但我的主要问题是我仍然不知道如何使用它。我一直在搜索,经过很长时间后,我发现在您使用文件夹 ~\app\templates 中的 ember g template application 生成的模板中的 application.hbs 中,我必须使用以下操作进行调用:

{{outlet}}
{{link-to nameoftheLibrary}}

但我对这个还不是很熟悉。我无法从我尝试使用的库中调用任何操作。

最佳答案

第一偏好:Ember 插件

最好你的 JavaScript 库是一个 ember 插件。然后,您只需键入以下内容即可安装它:

# ember install <addon name>

这通常会处理您需要执行的所有导入。 JavaScript 代码将包含在您编译的 Ember 应用程序中。

第二偏好:凉亭包

如果没有 ember 附加组件,那么您可以使用 bower:
# bower install -S <bower package name>

然后你需要在你的 .ember-cli-build 文件中添加依赖:
/*jshint node:true*/
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
      // snipped out some stuff
      });

  // this library is in your bower_components/somelibrary/somelibrary.js file
  app.import(app.bowerDirectory + '/somelibrary/somelibrary.js');

  return app.toTree();
};

最后的偏好:手动导入

如果你找不到你需要的库作为 ember 附加组件或 bower 包,你将不得不手动导入库。

第 1 步:将 javascript 文件夹保存在您的 vendor 文件夹中

将 Clustererer2.js 文件保存在 vendor/clusterer/clusterer2.js 之类的文件夹中。

第 2 步:修改您的 .ember-cli-build 文件以将其包含在您编译的 Ember 应用程序中

像这样修改你的文件:
/*jshint node:true*/
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
      // snipped out some stuff
      });

  app.import('vendor/clusterer/clusterer2.js');

  return app.toTree();
};

第 3 步:让 JSHint 对新的 Global 感到高兴

您将不得不让 jshint 对您将在代码中引用的新全局变量感到满意。将它添加到您的 .jshintrc 文件中:
{
  "predef": [
    "document",
    "window",
    "-Promise",
    "Clusterer"
  ],
  "browser": true,
  "boss": true,
  // snipped a lot of stuff
  "esnext": true,
  "unused": true
}

请注意,在 "-Promise" 条目之后我添加了 Clusterer 行?

第 4 步:重建 Ember 应用程序并使用您的新库

现在您已经在编译输出中包含了 javascript 文件,您应该能够在代码中引用它。

关于javascript - 如何在 Ember.js 上导入库?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38919757/

10-11 09:16
查看更多