Question

我有一个Aurelia CLI应用程序，我还用npm安装了admin-lte。问题是它没有正确加载。这是因为Admin LTE使用jQuery DOM ready事件，并且期望事情在那一刻出现在DOM中。但是，如果我在app.html中声明所有布局html没有任何反应，因为事情后来附加了（我猜）。

我创造了一个模拟问题的要点。我想我可以在app.js中使用附加钩子并做一些事情，但我不确定是什么。

https://gist.run/?id=e4521c1fb38ec82bffd6a0e4fd8b1da6

如您所见，在index.html中引用了plugin.js，就像我在我的应用程序中引用Admin LTE javascripts一样。 div不会改变，因为它在plugin.js中的脚本运行后到达。

这是我真实应用的主体：

<body aurelia-app="main" class="hold-transition skin-blue sidebar-mini">
    <script src="scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>
    <!-- REQUIRED JS SCRIPTS -->

    <!-- jQuery 2.2.3 -->
    <script src="node_modules/admin-lte/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="node_modules/admin-lte/bootstrap/js/bootstrap.min.js"></script>
    <!-- AdminLTE App -->
    <script src="node_modules/admin-lte/dist/js/app.js"></script>
  </body>

我真正需要的是确保$(function () {...})中的admin-lte/dist/js/app.js运行。也许你可以强制jQuery重新运行这个函数？

Answer 1

在我的app.js中，我可以使用附加的函数并调用函数来修复布局：

export class App {
    attached(){
        $.AdminLTE.layout.fix();
    }
}

找到信息here

使用Admin LTE和Aurelia

1 个答案: