我目前正在使用 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/