2016-05-16 9 views
0

Ich erhalte den Fehler: "Uncaught referenceError: App ist nicht definiert" in meiner JS-Konsole beim Laden dieser Enyo App auf meinem localhost. Ich bin neu bei Enyo, also versuche ich immer noch, die Konzepte von Arten und Komponenten zu lernen.Enyo-Fehler: "Uncaught referenceError: App ist nicht definiert"

app.js (in Quellenordner):

enyo.kind({ 
name: "App", 
kind: "FittableRows", 
classes: "enyo-fit enyo-unselectable", 
components: [ 
     { 
     kind: "onyx.Toolbar", 
     layoutKind:"FittableColumnsLayout", 
     components: [ 
      { 
       kind:onyx.Button, 
       style:"width:80px;background:green;", 
       ontap:"handleBtnBack", 
       content:"Back" 
      }, 
      { 
       content:"Header", 
       style:"text-align:center;", 
       fit:true 
      }, 
      { 
       kind:onyx.Button, 
       style:"width:80px;background:red;", 
       ontap:"handleBtnNext", 
       content:"Next" 
      } 
     ] 
    }, 
    { 
     kind: "Scroller", 
     horizontal:"hidden", 
     touch:true, 
     fit:true, 
     thumb:true, 
     components:[ 
     { 
       tag:"h1", 
       //This is how we insert css class. 
       classes:"padding15px", 
       content:"This is content area...Hello World!!!" 
      } 
     ]    
    }, 
    { 
     kind: "onyx.Toolbar", 
     // The footer 
     layoutKind:"FittableColumnsLayout", 
     components:[ 
      { 
        kind:"onyx.Button", 
        content:"Go Next Page", 
        ontap:"handleBtnNextPage", 
        fit:true 
      } 
     ] 
    } 
], 
create: function(){ 
    this.inherited(arguments); 
    console.log("App is created in memory"); 
}, 
rendered : function(){ 
    this.inherited(arguments); 
    console.log("App is created in rendered into DOM"); 
}, 
    handleBtnNextPage : function(inSender,inEvent){ 
     new Page2().renderInto(document.body); 
    }, 
    handleBtnNext: function(inSender,inEvent){ 
     new Page2().renderInto(document.body); 
    }, 
    handleBtnBack: function(inSender,inEvent){ 
     //For each enyo event handler comes with inSender, the control that sends the event and the inEvent the actual event itself. 
     alert("Back Button"); 
    } 
}); 

package.js (in Quellenordner):

enyo.depends(
// Layout library 
"$lib/layout", 
// Onyx UI library 
"$lib/onyx", // To theme Onyx using Theme.less, change this line to $lib/onyx/source, 
//"Theme.less", // uncomment this line, and follow the steps described in Theme.less 
// CSS/LESS style files 
"../assets/css/app.css", 
// Include our default entry point 
"App.js", 
"Page2.js" 
); 

index.html (im Stammverzeichnis):

<!--My Copy--> 

    <!DOCTYPE html> 
    <html> 
    <head> 
     <title>IsGoodStuff.com Tutorial #2</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 

     <link rel="shortcut icon" href="assets/favicon.ico"/> 

     <script src="enyo/enyo.js" type="text/javascript"></script> 

     <!-- --> 
     <script src="package.js" type="text/javascript"> </script> 

    </head> 
    <body> 
     <script type="text/javascript"> 
     new App().renderInto(document.body); 

     </script> 
    </body> 
    </html> 

Antwort

0

Wenn sich Ihre index.html in Ihrem Stammordner befindet, sich aber die Hauptdatei package.js im Quellordner befindet, ist es wahrscheinlich Ihr Skript-Tag, das package.js lädt. Versuchen Sie:

<script src="source/package.js" type="text/javascript"> </script> 
0

Sie haben Seite2 nicht geliefert, aber es scheint, der Code würde so funktionieren wie er ist.

Hier ist eine Geige zeigt die Arbeits Seite: http://jsfiddle.net/kgxvg7Lw/1/

Einige Gedanken:

1) Sind Sie Groß- und Kleinschreibung Dateisystem? Sie zeigen app.js, aber Ihre package.js hat App.js (groß geschrieben). 2) Sind Sie sicher, dass in der Konsole keine Parse-Fehler vorliegen?

Nun, das sagte ... Sie wollen wahrscheinlich nicht eine neue App für jede 'Seite' neu laden. Normalerweise würden Sie so etwas wie Panels verwenden, damit die App den auf dem Bildschirm angezeigten Inhalt steuern und einfach zwischen den Panels navigieren kann.