I am learning Ember, and have hit a roadblock when it comes to using an script dependency in my ember route. I have included the bower dependency Trianglify.js in my application using app.import()
in ember-cli-build.js
:
app.import('bower_components/trianglify/dist/trianglify.min.js');
I want to use this script to modify the background on my home route template. I would like the background effect to be applied to an element on my home page. I will either add a custom class to the output container of my home route, or target the global .ember-view
div for now just to get it working.
I am realizing how little I know about how Ember,and am pretty confused as to how I achieve this functionality. When I try to import Trianglify into my home.js
route like this:
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({
});
I get the error:
Uncaught Error: Could not find module `Trianglify` imported from `site/routes/home`
I am unsure where the scripts go when I app.import()
them, and how I can then use those scripts elsewhere in my application to modify the presentation of elements in certain views. How do I import this script for use in other JS files? How do I reference it?
Also, since components are what we should be using, would I create a custom wrapper component for this route and import Trainglify into that file since components are the what should dictate view layer concerns?
Thank you for any help.
Aucun commentaire:
Enregistrer un commentaire