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

应用程序.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();

两周找不到错误！谢谢。

4

2 回答 2

0

haha, i see you are using my and xrado's Router class. :) in any case, the problem you have is in your init and javascript loader.

first off, this:

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

when running init methods, this will be the host object so this.render()

second, lazy loading re-invented. see the mootools Assets.js - https://github.com/mootools/mootools-more/blob/master/Source/Utilities/Assets.js#L24-48

there's an error in the mootools source which means IE9 will revert to onreadystatechange callback despite of IE9 already supporting load event. still, it's fine, it won't ever fire before it's ready. keep in mind the scope of index when brought in later.

I tend to also use RequireJS, which allows me to lazy-load resources in time for the app to work, it's a nice way of delegating stuff and being able to package them

blatant self advert

Since your index.js looks like a view, I would recommend you look at Epitome, which I wrote to be able to structure such apps in MooTools - http://dimitarchristoff.github.com/Epitome/ - it's a lightweight MVP implementation based upon Class and Events. Comes with the same router class, works with AMD or normal script loading, etc. And has a proper view / model / collection / templating structure.

For example, look at the todomvc implementation of that in a hash app here: http://dimitarchristoff.github.com/Epitome/#examples/todomvc-reference - see the repo with example code https://github.com/DimitarChristoff/Epitome-todo.

于 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( ){

高温高压

格克斯塔

于 2012-08-25T16:26:30.930 回答