vendredi 23 octobre 2015

Where to use jQuery plugin methods in an Ember app

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?




Aucun commentaire:

Enregistrer un commentaire