I am new to emberjs and I am trying to add the template link but I have a problem with the menu because when clicking it does not display the submenu.
I already found out why the submenu is not displayed: when you add the click event from JavaScript, you can not find any html element.
This is the code:
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();
});
}
});
}); When executing the selector $('#sidebar-menu') does not find the html.
How do I load all the html first and then run this javascript that belongs to the template?
I am importing the files in the file ember-cli-build.js in the following way:
/*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 of ember-cli: 2.11.1