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

2019-10-12 07:35:37 阅读：248 来源： 互联网

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

救命！

我正在研究一个肥腻的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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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