emberjs html模板,当在页面中插入html时,Emberjs不会加载jquery / javascript,运行代码

救命！

我正在研究一个肥腻的emberjs / yeoman项目,该项目使用多个hbs模板,这些模板都可以从一个application.hbs的侧边栏路由到.

问题是当我加载页面时,有时使该边栏折叠的Jquery无法正常工作,而同一文件中的其他jquery却可以工作.有时什么都没有.

我正在从一个名为magic.js的文件中调用我的javascript / jquery

magic.js是在主体关闭之前调用的最后一件事.

这是magic.js文件

$( document ).ready(function() {

var close=true

$(".collapsibleHeader").click(function(){

$(this).siblings().slideToggle("fast");

});

// Sidebar START

$(".arrow").click(function() {

if($('.float-left-col').css('width')=='200px') {

$('.float-left-col').removeClass('open');

$('.float-left-col').addClass('closed');

$('.sidebar-button-text').addClass('vanish');

$('.arrow').removeClass('reverse-rotate');

$('.arrow').addClass('rotate');

$('.full-logo').addClass('vanish');

$('.logo-only-container').removeClass('vanish');

$('.content-container').css('margin-left','80px')

}

else {

$('.float-left-col').removeClass('closed');

$('.float-left-col').addClass('open');

$('.arrow').addClass('reverse-rotate');

$('.logo-only-container').addClass('vanish');

$('.full-logo').removeClass('vanish');

var delay = setTimeout(function(){

$('.sidebar-button-text').removeClass('vanish');},250)

$('.arrow').removeClass('rotate');

$('.content-container').css('margin-left','200px');

}

});

边栏不起作用在application.hbs文件中,因此我不确定为什么它将停止加载.

//..stuff inside the sidebar..

为什么我的JavaScript无法正确加载？我应该在其他文件中调用它吗？

解决方法:

您可能正在尝试在创建元素之前附加jquery.准备好文档并不一定要准备Ember的视图.

在您的情况下,请在应用程序模板中插入侧边栏,以便在您的应用程序视图中将jquery添加到didInsertElement挂钩中

App.ApplicationView = Em.View.extend({

doStuff: function(){

//do your jquery here, the element is in the page now

}.on('didInsertElement')

});

此模式也可以应用于整个应用程序中的其他视图

App.FooView = Em.View.extend({

doStuff: function(){

// do some crazy stuff cause the foo template has been inserted!

}.on('didInsertElement')

});

标签：javascript,jquery,url-routing,ember-js,load

来源： https://codeday.me/bug/20191012/1898645.html