backbone.js 'body'未定义,取决于script标记的位置

nwlls2ji  于 2022-11-24  发布在  其他
关注(0)|答案(1)|浏览(142)

我正在做一个 Backbone.js 应用程序的helloworld示例,只有当脚本src标记包含在主体中而不是头中时,它才能工作(我希望它们在的位置)。如果我将它们放在标头中并执行警报(el)表示未定义。但是,如果我在正文中有脚本src标记并执行alert(el)它写的是object HTMLBodyElement,hello world的例子也能用。(这是我能让它工作的唯一方法)
为什么会这样呢?
"不起作用"

<!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);
k75qkfdt

k75qkfdt1#

执行此操作时:

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

当脚本被加载时,DOM中会出现一个<body>,特别是当你点击下面的按钮时,会出现一个<body>

el: $('body')

当您这样做时:

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

当你点击el: $('body')时不会有<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
});

相关问题