我有一个 Aurelia CLI 应用程序,并且还使用 npm 安装了 admin-lte。 问题是它无法正确加载。这是因为 Admin LTE 使用 jQuery DOM 就绪事件并期望此时 DOM 中存在内容。 但是,如果我在 app.html 中声明所有布局 html,则不会发生任何事情,因为内容是稍后附加的(我的猜测)。
我创建了一个模拟问题的要点。我想我可以在 app.js 中使用附加的钩子(Hook)并做一些事情,但我不确定做什么。
https://gist.run/?id=e4521c1fb38ec82bffd6a0e4fd8b1da6
如您所见,index.html 中引用了plugin.js,就像我在应用程序中引用Admin LTE javascript 一样。 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 重新运行这个函数?
最佳答案
在我的 app.js 中,我可以使用附加函数并调用函数来修复布局:
export class App {
attached(){
$.AdminLTE.layout.fix();
}
}
找到信息here
关于javascript - 将 Admin LTE 与 Aurelia 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39278294/