'body'undefined取决于脚本标记的位置

我正在做一个骨干应用程序的hello世界示例，它只适用于脚本src标记包含在正文中，而不是标题（我在哪里期待他们）。如果我将它们放在标题中，并且执行提醒（el），则表示未定义。但是，如果我在脚本中使用脚本src标记并执行alert（el），则表示object HTMLBodyElement和hello world示例有效。我还注意到，我正在看的教程有脚本src标签在内部http://arturadib.com/hello-backbonejs/（这是我可以得到它的唯一办法）'body'undefined取决于脚本标记的位置

为什么呢？

不工作

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <title>hello-backbonejs</title> 
    <link rel="stylesheet" href="static/style.css"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> 
    <script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script> 
    <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script> 
    <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script> 
    <script src="static/backbone.localStorage-min.js"></script> 
    <script src="app.js"></script> 

    </head> 
    <body> 



    </body> 
    </html>

作品

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <title>hello-backbonejs</title> 
    <link rel="stylesheet" href="static/style.css"> 


    </head> 
    <body> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> 
    <script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script> 
    <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script> 
    <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script> 
    <script src="static/backbone.localStorage-min.js"></script> 
    <script src="app.js"></script> 


    </body> 
    </html>

这是JavaScript

(function($){ 
    // **ListView class**: Our main app view. 
    var ListView = Backbone.View.extend({  
    el: $('body'), // attaches `this.el` to an existing element. 
    // `initialize()`: Automatically called upon instantiation. Where you make all types of bindings, _excluding_ UI events, such as clicks, etc. 
    initialize: function(){ 
     _.bindAll(this, 'render'); // fixes loss of context for 'this' within methods 

     this.render(); // not all views are self-rendering. This one is. 

    }, 
    // `render()`: Function in charge of rendering the entire view in `this.el`. Needs to be manually called by the user. 
    render: function(){ 
     $(this.el).append("<ul> <li>hello world</li> </ul>"); 
     alert(this.el); 
    } 
    }); 

    // **listView instance**: Instantiate main app view. 
    var listView = new ListView();  
})(jQuery);

来源

2012-09-23 BrainLikeADullPencil

当你这样做：

<body> 
    <script src="..."></script> 
    ... 
</body>

加载脚本时，您的DOM中会有一个<body>。特别是，你将有一个<body>当你打这样的：

el: $('body')

当你做这种方式：

<head> 
    <script src="..."></script> 
</head> 
<body> 
    ... 
</body>

不会有一个<body>当你打el: $('body')所以你el将结束在Backbone解包$('body')之后为undefined。

我想你感到困惑的区别：

(function($) { /* ... */ })(jQuery);

和

$(function() { /* ... */ });

第一个立即执行的功能，第二个是一样的

$(document).ready(function() { /* ... */ });

并且在DOM准备就绪时执行该函数。您可能希望您的JavaScript看起来更像这样：

$(function() { 
    var ListView = Backbone.View.extend({ /* ... */ }); 
    var listView = new ListView(); 
    // And now do something with listView 
});

来源

2012-09-23 01:43:34

'body'undefined取决于脚本标记的位置

回答

相关问题