将 Admin LTE 与 Aurelia 一起使用

Question

我有一个 Aurelia CLI 应用程序，我还使用 npm 安装了 admin-lte。问题是它没有正确加载。这是因为 Admin LTE 使用 jQuery DOM 就绪事件并期望事情在那一刻处于 DOM 中。但是，如果我在我的 app.html 中声明所有布局 html，则不会发生任何事情，因为稍后会附加东西（我的猜测）。

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

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

如您所见，plugin.js 在 index.html 中被引用，就像我在我的应用程序中引用 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>

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

Answer 1

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

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

找到信息here

将 Admin LTE 与 Aurelia 一起使用

Using Admin LTE with Aurelia

javascript

jquery

aurelia

adminlte