Location of custom javascript files

Ember CLI
1

I’m trying to create an initialize function in javascript that relies on jquery being loaded.

What is the best way to achieve this? Where do custom javascript files normally go?

2
  • bower_components/ Your dependencies, both those included with Ember CLI and those installed with Bower.
  • vendor/ Your external dependencies not installed with Bower or Npm.
3

In my app I have 3 tabs. I need to run a piece of javascript when one of the tabs is clicked but I only want to run it one time; not for every click of the tab.

Or if I could run this once the app has finished loading (this code is dependent on jQuery being loaded) how would I go about doing that?

Code I need to run:

$('.sortable').sortable();
    $('.handles').sortable({
        handle: 'span'
    });

    Ember.$('.connected').sortable({
        connectWith: '.connected'
    });

    $('.exclude').sortable({
        items: ':not(.disabled)'
    });

    $('.sortable').sortable().bind('sortupdate', function () {
        console.log('SORT UPDATE...');
    });
4

Ember is constantly adding/removing dom elements to the page, as you move between routes, data changes etc. This means you can’t just call the sortable() method when the page loads, you need to call it when ember inserts the element into the page. This is exactly what the didInsertElement callback is for. It’s available on any component or view classes.

I’m not sure how you’ve got things organised at the moment but you might want to think about creating something like a sortable-items.js component (you need a hyphen in the name for components).

The guide at http://emberjs.com/guides/understanding-ember/managing-asynchrony/ has some userful information about this.

2 Likes