当在页面中插入html时,Emberjs不会加载jquery / javascript,运行代码
作者：互联网
救命！
我正在研究一个肥腻的emberjs / yeoman项目,该项目使用多个hbs模板,这些模板都可以从一个application.hbs的侧边栏路由到.
问题是当我加载页面时,有时使该边栏折叠的Jquery无法正常工作,而同一文件中的其他jquery却可以工作.有时什么都没有.
我正在从一个名为magic.js的文件中调用我的javascript / jquery
<body>
<!-- build:js scripts/components.js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/handlebars/handlebars.runtime.js"></script>
<script src="bower_components/ember/ember.js"></script>
<script src="bower_components/ember-data-shim/ember-data.js"></script>
<!-- endbuild -->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-c0QvqnFcYbP4r6t7sBiKPu9GPqRLRug&sensor=true">
</script>
<!-- build:js(.tmp) scripts/templates.js -->
<script src="scripts/compiled-templates.js"></script>
<!-- endbuild -->
<!-- build:js(.tmp) scripts/main.js -->
<script src="scripts/combined-scripts.js"></script>
<!-- endbuild -->
<!-- build:js scripts/plugins.js -->
<script src="bower_components/bootstrap-sass/js/affix.js"></script>
<script src="bower_components/bootstrap-sass/js/alert.js"></script>
<script src="bower_components/bootstrap-sass/js/dropdown.js"></script>
<script src="bower_components/bootstrap-sass/js/tooltip.js"></script>
<script src="bower_components/bootstrap-sass/js/modal.js"></script>
<script src="bower_components/bootstrap-sass/js/transition.js"></script>
<script src="bower_components/bootstrap-sass/js/button.js"></script>
<script src="bower_components/bootstrap-sass/js/popover.js"></script>
<script src="bower_components/bootstrap-sass/js/carousel.js"></script>
<script src="bower_components/bootstrap-sass/js/scrollspy.js"></script>
<script src="bower_components/bootstrap-sass/js/collapse.js"></script>
<script src="bower_components/bootstrap-sass/js/tab.js"></script>
<!-- endbuild -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script src="scripts/models/permit_model.js"></script>
<!-- // <script src="scripts/arcgislink_compiled.js" type="text/javascript"></script> -->
<script src="scripts/magic.js"></script> <!-- Controls UI based javascript. Buttons, pretty effects, animations, etc. -->
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文件中,因此我不确定为什么它将停止加载.
<div class="super-col">
<div id="sidebar-wrapper" class="float-left-col open">
<ul class="nav nav-pills nav-stacked text-center">
//..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