0

質問があります。あなたが私を助けてくれるかもしれません。私はページ（index.php）を持っています：...

<head>
<script src="site/js/mootools-core.js" /></script>      
<script src="site/js/mootools-more.js" /></script>
<script type="text/javascript" src="site/js/router.js" /></script>
<script type="text/javascript" src="site/js/app.js" /></script>
</head>
<body></body>

...

router.js プロジェクト: https://github.com/xrado/Router/blob/master/Demo/index.html

app.js:

window.addEvent('domready',function(){

   var Core = { 
      loadScript:function(url, callback){
         var script = document.createElement("script")
         script.type = "text/javascript";

         if (script.readyState){  //IE
           script.onreadystatechange = function(){
            if (script.readyState == "loaded" || script.readyState == "complete"){
              script.onreadystatechange = null;
              callback();
            }
          }
        } else {  //Others
          script.onload = function(){
            callback();
          }
        }
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
      }
    }

   var router = new Router({
      routes: {
         ''     : 'index',
         '#!index'  : 'index'
      },

      onReady: function(){
         Core.init();                     // Render body here ... working! 
      },

      onIndex: function() {
         Core.loadScript("index.js", function(){
           index.init();           // ReferenceError: index is not defined      
           console.log('Index loaded...'); 
         });
      }
   });

});

ここに私の外部index.jsがあります:

var index = {
   init : function(){   
      $('div_content').set('html', index.render()); 
   },
   render: function() {
      ...
   }
}

ページを読み込もうとすると、次のエラーが発生します。

ReferenceError: インデックスが定義されていません index.init();

2週間エラーが見つからない！ありがとう。

4

2 に答える 2

0

ハハ、私と xrado の Router クラスを使用しているようです。:) いずれにせよ、問題は init と JavaScript ローダーにあります。

まず、これ：

var index = {
   init : function(){   
      $('div_content').set('html', index.render()); 
   },
   render: function() {
      ...
   }
}

init メソッドを実行thisすると、ホスト オブジェクトになるので、this.render()

第二に、遅延読み込みが再発明されました。mootools Assets.js を参照してください - https://github.com/mootools/mootools-more/blob/master/Source/Utilities/Assets.js#L24-48

mootools ソースにエラーがあります。これはonreadystatechange 、IE9 がすでにロード イベントをサポートしているにもかかわらず、IE9 がコールバックに戻ることを意味します。それでも、大丈夫です。準備が整う前に発火することはありません。後で持ち込むときは、インデックスの範囲に注意してください。

私は RequireJS も使用する傾向があります。これにより、アプリが動作するのに間に合うようにリソースを遅延ロードできます。これは、物事を委任してパッケージ化できる良い方法です。

あからさまな自己宣伝

あなたの index.js はビューのように見えるので、MooTools でそのようなアプリを構築できるように私が書いた Epitome を見ることをお勧めします - http://dimitarchristoff.github.com/Epitome/ - これは軽量の MVP 実装ベースですクラスおよびイベント時。同じルーター クラスが付属し、 AMD または通常のスクリプトの読み込みなどで動作します。また、適切なビュー / モデル / コレクション / テンプレート構造を備えています。

たとえば、ハッシュ アプリでの todomvc の実装を見てください: http://dimitarchristoff.github.com/Epitome/#examples/todomvc-reference - サンプル コードを含むリポジトリを参照してください https://github.com/DimitarChristoff /エピトメトド。

于 2012-08-26T11:34:12.273 に答える
0

それは私のために働く：

<html>
<head>
<script>
document.addEventListener("DOMContentLoaded",function(){
   var Core = { 
      loadScript:function(url, callback){
         var script = document.createElement("script");
         script.type = "text/javascript";
          script.onload = function(){
            callback();
          }
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
      }
    }

    Core.loadScript("index.js", function(){
           index.init();     // ReferenceError: index is not defined      
           console.log('Index loaded...'); 
    });
});
</script>
</head>
<body>
</body>
</html>​

"window.addEvent("domready"...." はネイティブ メソッドではないため、mooTools はいくつかの魔法を実行し、ロードされた変数のスコープを変更すると仮定します。したがって、document.addEventListener("DOMContentLoaded",function( ){

HTH

ゲクスター

于 2012-08-25T16:26:30.930 に答える