How to load JS correctly with Ember?

Question

I’m trying to set up this template http://wrapbootstrap.com/preview/WB0048JF7 in a project with Ember, however, the main library nifty.js is not loading the element . mega-dropdown (top menu) and the #Mainnav element (side menu). My ember-cli-build.js is like this:

/*jshint node:true*/
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    // Add options here
  });

  // Use `app.import` to add additional libraries to the generated
  // output files.
  //
  // If you need to use different assets in different
  // environments, specify an object as the first parameter. That
  // object's keys should be the environment name and the values
  // should be the asset to use in that environment.
  //
  // If the library that you are including contains AMD or ES6
  // modules that you would like to import into your application
  // please specify an object with the list of modules as keys
  // along with the exports of each module as its value.


  // Bootstrap 3.3.6
  app.import({
    development: 'vendor/nifty/plugins/bootstrap/css/bootstrap.css',
    production:  'vendor/nifty/plugins/bootstrap/css/bootstrap.min.css'
  });

  app.import({
    development: 'vendor/nifty/plugins/bootstrap/css/bootstrap.css.map',
    production:  'vendor/nifty/plugins/bootstrap/css/bootstrap.min.css.map'
  }, { destDir: 'assets' });

  // fonts
  app.import('vendor/nifty/plugins/bootstrap/fonts/glyphicons-halflings-regular.eot', { destDir: 'fonts' });
  app.import('vendor/nifty/plugins/bootstrap/fonts/glyphicons-halflings-regular.svg', { destDir: 'fonts' });
  app.import('vendor/nifty/plugins/bootstrap/fonts/glyphicons-halflings-regular.ttf', { destDir: 'fonts' });
  app.import('vendor/nifty/plugins/bootstrap/fonts/glyphicons-halflings-regular.woff', { destDir: 'fonts' });


  /*****************************
  ***    Nifty Styles
  ******************************/

  // Themify Icons
  app.import({
    development: 'vendor/nifty/themify-icons/css/themify-icons.css',
    production:  'vendor/nifty/themify-icons/css/themify-icons.min.css'
  });

  // fonts
  app.import('vendor/nifty/themify-icons/fonts/themify.eot', { destDir: 'fonts' });
  app.import('vendor/nifty/themify-icons/fonts/themify.svg', { destDir: 'fonts' });
  app.import('vendor/nifty/themify-icons/fonts/themify.ttf', { destDir: 'fonts' });
  app.import('vendor/nifty/themify-icons/fonts/themify.woff', { destDir: 'fonts' });

  // Page Load Progress Bar
  app.import({
    development: 'vendor/nifty/plugins/pace/pace.css',
    production:  'vendor/nifty/plugins/pace/pace.min.css'
  });

  // Magic Checkbox
  app.import({
    development: 'vendor/nifty/plugins/magic-check/css/magic-check.css',
    production:  'vendor/nifty/plugins/magic-check/css/magic-check.min.css'
  });

  // Theme style
  app.import({
    development: 'vendor/nifty/css/nifty.css',
    production:  'vendor/nifty/css/nifty.min.css'
  });

  /*****************************
  ***    Nifty Scripts
  ******************************/

  app.import({
    development: 'vendor/nifty/plugins/pace/pace.js',
    production:  'vendor/nifty/plugins/pace/pace.min.js'
  });

  // jQuery
  app.import({
    development: 'vendor/nifty/plugins/jquery/jquery-2.2.4.js',
    production:  'vendor/nifty/plugins/jquery/jquery-2.2.4.min.js'
  });

  // Bootstrap 3.3.6
  app.import({
    development: 'vendor/nifty/plugins/bootstrap/js/bootstrap.js',
    production:  'vendor/nifty/plugins/bootstrap/js/bootstrap.min.js'
  });

  // Nifty Admin
  app.import({
    development: 'vendor/nifty/js/nifty.js',
    production:  'vendor/nifty/js/nifty.min.js'
  });

  return app.toTree();
};

that stretch that I want to be executed

77375    $(document).ready(function(){
77376        $(document).trigger('nifty.ready');
77377    });

..
77454    $(document).on('nifty.ready', function(){
77455        megadropdown = $('.mega-dropdown');
77456        if(megadropdown.length){
77457            megadropdown.niftyMega();
77458            $('html').on('click', function(e) {
77459                if (!$(e.target).closest('.mega-dropdown').length) {
77460                    megadropdown.removeClass('open');
77461                }
77462            });
77463        };
77464    });

I don’t know how to make ember charge, but if I run on the console $('.mega-dropdown').niftyMega(); the menu starts working..

How can I make Ember load js so everything is clickable like the example template??????

Answer 1

You can run the code $('.mega-dropdown').niftyMega(); in the hook didInsertElement() of its component.