Question

我收到错误：在我的本地主机上加载此Enyo应用程序时，我的JS控制台中出现“未捕获的referenceError：App未定义”。我是Enyo的新手，所以我仍然在努力学习种类和组件的概念。

app.js（在源文件夹中）：

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（在源文件夹中）：

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（在根文件夹中）：

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

Answer 1

如果您的index.html位于根文件夹中，但主package.js位于源文件夹中，则可能是您的脚本标记加载了package.js。尝试：

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

Answer 2

您还没有提供Page2，但看起来代码可以按原样运行。

这是一个显示工作页面的小提琴：http://jsfiddle.net/kgxvg7Lw/1/

一些想法：

1）您使用的是区分大小写的文件系统吗？您显示app.js但package.js已App.js（大写）。 2）您确定控制台中没有解析错误吗？

现在，说...你可能不想为每个'页面'开关重新加载一个新的应用程序。通常，您可以使用类似Panel的内容来允许应用程序控制屏幕上显示的内容，并根据需要在面板之间导航。

Enyo错误：“未捕获的referenceError：App未定义”

2 个答案: