0

I am getting the error: "Uncaught referenceError: App is not defined" in my JS console when loading this Enyo app on my localhost. I am brand new to Enyo so I am still trying to learn the concepts of kinds and components.

app.js (in source folder):

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 source folder):

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 (in root folder):

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

2 Answers2

0

If your index.html is in your root folder, but the main package.js is in the source folder, it's probably your script tag that loads package.js. Try:

<script src="source/package.js" type="text/javascript"> </script>
Webby Vanderhack
  • 889
  • 7
  • 13
0

You haven't supplied Page2 but it appears the code would work as-is.

Here's a fiddle showing the working page: http://jsfiddle.net/kgxvg7Lw/1/

Some thoughts:

1) Are you using a case-sensitive file system? You show app.js but your package.js has App.js (capitalized). 2) Are you certain there are no parse errors in the console?

Now, that said... You probably don't want to reload a new app for every 'page' switch. Usually, you would use something like Panels to allow the app to control the content that appears on the screen and just navigate among the panels as needed.

Pre101
  • 2,370
  • 16
  • 23