Emberjs 不会加载 jquery/javascript，在页面中插入 html 时运行代码 [英] Emberjs will not load jquery/javascript, run code when html is inserted in the page
本文介绍了Emberjs 不会加载 jquery/javascript，在页面中插入 html 时运行代码的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
帮助！
我正在开发一个庞大的 emberjs/yeoman 项目，该项目使用多个 hbs 模板，这些模板都可以从一个 application.hbs 的侧边栏路由到.
问题是当我加载页面时，有时使侧边栏折叠的 Jquery 不起作用，而同一文件中的其他 jquery 则起作用.有时根本没有任何作用.
我正在从一个名为 magic.js 的文件中调用我的 javascript/jquery
<!-- build:js 脚本/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 --><脚本类型=文本/javascript"src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-c0QvqnFcYbP4r6t7sBiKPu9GPqRLRug&sensor=true"><!-- 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><!-- 控制基于 UI 的 javascript.按钮、漂亮的效果、动画等. -->magic.js 是 body 关闭前最后调用的东西.
这是magic.js文件
$( 文档 ).ready(function() {变量关闭=真$(".collapsibleHeader").click(function(){$(this).siblings().slideToggle("fast");});//侧边栏开始$(".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('反向旋转');$('.arrow').addClass('旋转');$('.full-logo').addClass('vanish');$('.logo-only-container').removeClass('vanish');$('.content-container').css('margin-left','80px')}别的 {$('.float-left-col').removeClass('关闭');$('.float-left-col').addClass('open');$('.arrow').addClass('反向旋转');$('.logo-only-container').addClass('vanish');$('.full-logo').removeClass('vanish');var 延迟 = setTimeout(function(){$('.sidebar-button-text').removeClass('vanish');},250)$('.arrow').removeClass('rotate');$('.content-container').css('margin-left','200px');}});不起作用的侧边栏位于 application.hbs 文件中，所以我不确定它为什么会停止加载.
<div id="sidebar-wrapper" class="float-left-col open"><ul class="nav nav-pills nav-stacked text-center">//..侧边栏中的东西..为什么我的 javascript 没有正确加载?我应该在不同的文件中调用它吗?
解决方案 您可能试图在创建元素之前附加 jquery.文档就绪并不一定与 Ember 的视图就绪的时间相同.
在您的情况下，您在应用程序模板中插入侧边栏，因此在您的应用程序视图中，您可以在 didInsertElement 挂钩中添加 jquery
App.ApplicationView = Em.View.extend({doStuff:函数(){//在这里做你的jquery，元素现在在页面中}.on('didInsertElement')});
此模式也可应用于整个应用中的其他视图
App.FooView = Em.View.extend({doStuff:函数(){//做一些疯狂的事情，因为 foo 模板已被插入！}.on('didInsertElement')});
Help!
I'm working on a meaty emberjs/yeoman project that uses multiple hbs templates that can all be routed to from one application.hbs's sidebar.
The problem is when I load the page, sometimes the Jquery to make that sidebar collapse will not work while other jquery in that same file does. Sometimes nothing works at all.
I'm calling my javascript/jquery from one file called magic.js
<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 is the last thing called before the body closes.
This is the magic.js file
$( 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');
}
});
The sidebar that isn't working is in the application.hbs file so I'm not sure why it would stop loading.
<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..
Why is my javascript not loading properly? Should I be calling it in a different file/s?
解决方案 You're probably trying to attach the jquery before the elements have been created. Document ready isn't necessarily the same time Ember's views are ready.
In your case you insert the sidebar in the application template, so in your application view you could add the jquery in the didInsertElement hook
App.ApplicationView = Em.View.extend({
doStuff: function(){
//do your jquery here, the element is in the page now
}.on('didInsertElement')
});
This pattern can be applied for other views as well throughout your app
App.FooView = Em.View.extend({
doStuff: function(){
// do some crazy stuff cause the foo template has been inserted!
}.on('didInsertElement')
});
这篇关于Emberjs 不会加载 jquery/javascript，在页面中插入 html 时运行代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
