Enyo 错误：“未捕获的引用错误：未定义应用程序”答案

【问题标题】：Enyo error: "Uncaught referenceError: App is not defined"Enyo 错误：“未捕获的引用错误：未定义应用程序”
【发布时间】：2016-05-16 08:38:03
【问题描述】：

在我的本地主机上加载此 Enyo 应用程序时，我的 JS 控制台中出现错误：“Uncaught referenceError: App is not defined”。我是 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>

【问题讨论】：

标签： enyo

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您尚未提供 Page2，但代码似乎可以按原样运行。

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

一些想法：

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

现在，就是说...您可能不想为每个“页面”切换重新加载新应用。通常，您会使用面板之类的工具来允许应用控制屏幕上显示的内容，并根据需要在面板之间导航。

【讨论】：