Where to use jQuery plugin methods in an Ember app

Question

Ember 2.1.0

I'm using FitText as an example, but my question is for any jQuery plugin / or really - any JS plugin.

Sometimes I want to use something site wide. Lets say there is a ellipsis or orphan script for text that I plan on using everywhere in the entire Ember app.

Then sometimes there are things such as this FitText plugin, where I want to do something with a page title here or there.

Then imagine there is some loading animation or something on the index.hbs or when entering the first route only - a one-off.

ember-cli-build.js (formerly Brocfile.js)

...
app.import('vendor/jquery.fittext.js');
...

templates/index.hbs

<div class='example-div'>
  <h1 class='example-target'>Some <span>type</span>.</h1>
</div>

standard implementation

$('.example-target).fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' });

How do I implement this in each case?

My first attempts were just to go top level in app.js – I'm sure that this isn't ideal - but would hold until I could level up.

For example, I have this function there currently:

app.js

...
function randomLandingClass() {
  var themes = ['color-theme', 'highlight-theme', 'alternate-theme'];
  var randomTheme = themes[Math.floor(themes.length * Math.random())];
  $('body').addClass(randomTheme);
}

Ember.MODEL_FACTORY_INJECTIONS = true;

App = Ember.Application.extend({
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver,

  ready() {

    randomLandingClass();

    $('.example-target').fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' });

  }

});
...

randomLandingClass acts as intended and uses jQuery, but the fitText method does not.

I've had success building a component with this particular plugin, but that just ignores my misunderstandings.

If I want to use a method site wide, where should it be called?

If I want to use a method in a few different routes only, how should it be called?

If I want to use something once, where/how should it be called?

I've tried many of the route hooks to no avail.

What is the core concept I'm missing?

Answer 1

Not sure what you mean with *but that just ignores my misunderstandings." - components are the Ember way to do exactly that and to hide/wrap jQuery plugin functionality in Ember constructs.

// components/fit-text.js
export default Ember.Component.extend({

    // defaults for the parameters
    scale: 1.2,
    minFontSize: '20px',
    maxFontSize: '40px',

    initialize: function() {
        this.$().fitText(
            this.get('scale'), {
                minFontSize: this.get('minFontSize'),
                maxFontSize: this.get('maxFontSize')
            }
        );
    }.on('didInitAttrs', 'didUpdateAttrs');
});

Now you can use it like so in your template:

<div class='example-div'>
    {{#fit-text tagName='h1' class='example-target'}}Some <span>type</span>.{{/fit-text}}
</div>

If you like to, you can override the default parameters, eg

<div class='example-div'>
    {{#fit-text tagName='h1' class='example-target' scale=1.5 maxFontSize='50px'}}Some <span>type</span>.{{/fit-text}}
</div>