當頁面插入html時，Emberjs不會加載jquery/javascript，運行代碼

幫助！當頁面插入html時，Emberjs不會加載jquery/javascript，運行代碼

我正在研究一個多肉眼的emberjs/yeoman項目，該項目使用多個hbs模板，可以從一個application.hbs的側欄中發送所有模板。

問題是當我加載頁面，有時候Jquery使該側欄崩潰將無法正常工作，而同一文件中的其他jquery。有時沒有任何工作。

我從一個文件叫我的JavaScript/jQuery的所謂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被稱爲人體關閉前的最後一件事。

這是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不能正確加載？我應該用不同的文件來調用它嗎？

來源

2013-11-21 Ian Steffy

你加載jQuery兩次？我之前看到過這個問題。 – mlienau

你可能試圖在元素創建之前附加jquery。準備文件不一定是Ember的意見準備好的同一時間。

在您的情況您將側邊欄應用程序模板，所以在你的應用程序視圖，你可以在didInsertElement鉤

App.ApplicationView = Em.View.extend({ 
    doStuff: function(){ 
    //do your jquery here, the element is in the page now 
    }.on('didInsertElement') 
});

可以在整個應用程序可以應用於其他的意見，以及這種模式增加了jQuery

App.FooView = Em.View.extend({ 
    doStuff: function(){ 
    // do some crazy stuff cause the foo template has been inserted! 
    }.on('didInsertElement') 
});

來源

2013-11-21 19:28:37 Kingpin2k

這解決了它。感謝主銷！ :) –

當頁面插入html時，Emberjs不會加載jquery/javascript，運行代碼

回答

相關問題