2016-09-01 3 views
1

Ich habe eine Aurelia CLI-Anwendung und ich habe auch admin-lte mit npm installiert. Das Problem ist, dass es nicht korrekt geladen wird. Dies liegt daran, dass Admin LTE das jQuery-DOM-ready-Ereignis verwendet und erwartet, dass sich die Elemente zu diesem Zeitpunkt im DOM befinden. Aber wenn ich alle Layout-HTML in meiner app.html.html deklariert passiert nichts, weil Dinge später (meine Vermutung) angehängt werden.Verwenden von Admin LTE mit Aurelia

Ich habe einen Kern erstellt, der das Problem simuliert. Ich denke, ich könnte angehängte Hooks in app.js verwenden und etwas tun, aber ich bin mir nicht sicher was.

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

Wie Sie sehen können, plugin.js in index.html verwiesen, so wie ich die Admin LTE Javascripts in meiner Anwendung verweisen. Das div ändert sich nicht, weil es nach dem Ausführen des Skripts in plugin.js ankommt.

Dies ist der Körper meiner realen App:

<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> 

Was ich brauche eigentlich ist, um sicherzustellen, dass die $(function() {...}) in admin-lte/dist/js/app.js läuft. Vielleicht könnten Sie jQuery zwingen, diese Funktion erneut auszuführen?

+0

Gefunden so, tut '$ (document) .auf (‘ ready ',' mySelector ', Rückruf) 'funktioniert nicht? – Charles

Antwort

1

In meinem app.js konnte ich die beigefügte Funktion und eine Funktion aufrufen, das Layout zu beheben:

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

die Informationen here