'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取決於腳本標記的位置

回答

相關問題