Ember js ejecutar javascript cuando se haya cargado el html

Ember CLI
1

Buen dia colegas, soy nuevo en emberjs y estoy tratando de adicionar el template GitHub - ColorlibHQ/gentelella: Free Bootstrap 4 Admin Dashboard Template pero tengo un problema con el menu porque al dar clic no despliega el submenu.

Ya encontre porque no se despliega el submenu: al momento de adicionar el evento click desde javascript no encuentra ningun elemento html, este es el codigo:

var CURRENT_URL = window.location.href.split('#')[0].split('?')[0],
    $BODY = $('body'),
    $MENU_TOGGLE = $('#menu_toggle'),
    $SIDEBAR_MENU = $('#sidebar-menu'),
    $SIDEBAR_FOOTER = $('.sidebar-footer'),
    $LEFT_COL = $('.left_col'),
    $RIGHT_COL = $('.right_col'),
    $NAV_MENU = $('.nav_menu'),
    $FOOTER = $('footer');

// Sidebar
$(document).ready(function() {
    // TODO: This is some kind of easy fix, maybe we can improve this
    var setContentHeight = function () {
        // reset height
        $RIGHT_COL.css('min-height', $(window).height());

        var bodyHeight = $BODY.outerHeight(),
            footerHeight = $BODY.hasClass('footer_fixed') ? -10 : $FOOTER.height(),
            leftColHeight = $LEFT_COL.eq(1).height() + $SIDEBAR_FOOTER.height(),
            contentHeight = bodyHeight < leftColHeight ? leftColHeight : bodyHeight;

        // normalize content
        contentHeight -= $NAV_MENU.height() + footerHeight;

        $RIGHT_COL.css('min-height', contentHeight);
    };

    $('#sidebar-menu').find('a').on('click', function(ev) {
        var $li = $(this).parent();

        if ($li.is('.active')) {
            $li.removeClass('active active-sm');
            $('ul:first', $li).slideUp(function() {
                setContentHeight();
            });
        } else {
            // prevent closing menu if we are on child menu
            if (!$li.parent().is('.child_menu')) {
                $SIDEBAR_MENU.find('li').removeClass('active active-sm');
                $SIDEBAR_MENU.find('li ul').slideUp();
            }

            $li.addClass('active');

            $('ul:first', $li).slideDown(function() {
                setContentHeight();
            });
        }
    });
    
 });

Al momento de ejecutar el selector $('#sidebar-menu') no encuentra el html. Como hago para cargar primero todo el html y luego ejecutar este javascript que pertenece al template

La importacion de los archivos la estoy realizando en el archivo ember-cli-build.js de la siguiente manera:

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

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {

  });

  // 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 -->
    app.import('bower_components/gentelella/vendors/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2', {
        destDir: 'fonts'
    });
    app.import('bower_components/gentelella/vendors/bootstrap/dist/css/bootstrap.min.css');

    // <!-- Font Awesome -->
    app.import('bower_components/gentelella/vendors/font-awesome/fonts/fontawesome-webfont.woff2', {
        destDir: 'fonts'
    });
    app.import('bower_components/gentelella/vendors/font-awesome/css/font-awesome.min.css');

    // <!-- Custom Theme -->
    app.import('bower_components/gentelella/build/css/custom.min.css');

    // // <!-- jQuery -->
    app.import('bower_components/gentelella/vendors/jquery/dist/jquery.min.js');
    // <!-- Bootstrap -->
    app.import('bower_components/gentelella/vendors/bootstrap/dist/js/bootstrap.min.js');

    app.import('bower_components/gentelella/src/js/helpers/smartresize.js');
    app.import('bower_components/gentelella/src/js/custom.js');

    return app.toTree();

};

Version de ember-cli: 2.11.1

Gracias

2

No seguro que puedo ayudar, pero no veo como integras este codigo con Ember, puedes mostrar controller y template?