samedi 16 janvier 2016

Using script resource Trianglify in Ember route to modify DOM

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