Backbone/Marionette Root-Layoutfehler mit Webpack

Ich habe eine Backbone/Marionette-App, die ich mit RequireJS entwickelt habe, und ich arbeite daran, sie in Webpack zu konvertieren. Webpack packt schön meinen Code, aber wenn ich versuche, das gepackte JS zu laden, kommt es zu einem Fehler, bei dem das DOM des Layouts keine der Kernregionen finden kann. Die Fehlermeldung lautet "An" el "#content muss in DOM vorhanden sein".Backbone/Marionette Root-Layoutfehler mit Webpack

A stubbed out Version meiner Quelle folgt:

HTML:

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
     <script type="text/javascript" src="/public/app/bundle.js"></script> 
    </head> 
    <body> 
     <div id="content" class="content"></div> 
    </body> 
</html>

JS: zur Zeit

var RootLayout = Marionette.View.extend({ 
    el: 'body', 

    regions: { 
     content: '#content' 
    } 
}); 

new RootLayout().getRegion('content').show(someView);

Ich arbeite mit Mario v3.0.0-pre.3, aber vor dem Wechsel zu Webpack hatte es keine Probleme damit - es könnte oder könnte nicht relevant sein. Ideen, wie ich das Problem lösen könnte?

Dank

Quelle

2016-07-31 Benjamin Valyou

Ich habe versucht, Dinge zu ändern, und definieren Sie die Wurzel app el in meiner Marionette.Application - Ich habe den gleichen Fehler dort. Es lässt mich glauben, dass etwas mit dem Backbone-Einsatz von jQuery zusammenhängt. Ich habe Probleme beim Debuggen, da jeder Haltepunkt aus irgendeinem Grund in lenkern.js auftaucht. –

Es stellt sich heraus eine der Änderungen, die ich zu meiner Init.js Datei irgendwie das Problem verursacht hat. Ich benutzte geschachtelte erfordert, um AMD-Abhängigkeiten in der richtigen Reihenfolge zu laden, und ich wechselte die Art, wie es arbeitete, um die Chunks-Ausgabe zu ändern. Durch das Zurücksetzen dieser Änderung wurde das Problem behoben.

Edit: Ich bin den Weg der Umwandlung meiner App weiter gegangen - weil es auf einem Node-Server ausgeführt wird Ich beschloss, alle meine RequireJS-Moduldefinitionen auf CommonJS zu konvertieren, und dieses Problem hob seinen hässlichen Kopf wieder auf. Nach einigen Stunden, in denen ich meinen Kopf gegen eine Wand schlug, wurde mir klar, dass das Problem darin bestand, dass meine Ansicht an das DOM angehängt wurde, bevor das HTML-Element, auf dem es sich befand, tatsächlich geladen war. Ein einfacher $ (document) .ready-Wrapper um meinen init-Code war die wirkliche Lösung (ich habe gerade das Script-Tag für mein Webpack-Paket an den unteren Rand des HTML-Bereichs verschoben).

tl; dr - RequireJS isoliert Sie davon, dass Sie sicherstellen müssen, dass Ihr DOM bereit ist, bevor Sie anfangen, damit zu spielen, während CommonJS nicht. Asynchron vs Synchronisierung.

Quelle

2016-07-31 16:16:01

Backbone/Marionette Root-Layoutfehler mit Webpack

Antwort

Verwandte Themen