在Ember路由中使用脚本资源Trianglify来修改DOM

时间:2016-01-16 18:49:17

标签: javascript ember.js trianglify

我正在学习Ember,并且在我的ember路线中使用脚本依赖时遇到了障碍。我已使用app.import() ember-cli-build.js中的app.import('bower_components/trianglify/dist/trianglify.min.js'); 在我的应用中包含了bower依赖关系Trianglify.js

.ember-view

我想使用此脚本修改我的家庭路线模板上的背景。我希望将背景效果应用于我的主页上的元素。我要么将自定义类添加到我的主路由的输出容器中,要么立即定位全局home.js div以使其正常工作。

我意识到我对Ember的了解有多少,而且我对如何实现这个功能感到非常困惑。当我尝试将Trianglify导入我的import Ember from 'ember'; import Trianglify from 'Trianglify'; var pattern = Trianglify({ width: window.innerWidth, height: window.innerHeight, cell_size: 90, variance: 1, stroke_width: 0.6, color_function : function(x, y) { return '#de6551'; } }).svg(); export default Ember.Route.extend({ }); 路线时:

Uncaught Error: Could not find module `Trianglify` imported from `site/routes/home`

我收到错误:

app.import()

我不确定脚本在我 compiler.plugin('done', (stats) => { //dont continue when there were build errors if(stats.compilation.errors && stats.compilation.errors.length) return; //yet this code gets triggered continously, while webpack only outputs asset information once. 时的位置,以及我如何在应用程序的其他位置使用这些脚本来修改某些视图中元素的显示。如何导入此脚本以用于其他JS文件?我该如何参考?

此外,由于组件是我们应该使用的组件,我是否会为此路由创建自定义包装器组件并将Trainglify导入到该文件中,因为组件应该是视图层关注的内容?

感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

我找到了使用ember-browserify的解决方法。

跑步 npm install --save-dev ember-browserify trianglify

然后通过

导入

import Trianglify from 'npm:trianglify';