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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了当在页面中插入html时,Emberjs不会加载jquery / javascript,运行代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4000字，纯文字阅读大概需要6分钟。

内容图文

救命！

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

内容总结

以上是互联网集市为您收集整理的当在页面中插入html时,Emberjs不会加载jquery / javascript,运行代码全部内容，希望文章能够帮你解决当在页面中插入html时,Emberjs不会加载jquery / javascript,运行代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/691713.html

来源：【匿名】