Home/ Questions/Q 8567469
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T17:53:28+00:00

I’m doing a hello world example of a backbone app, and it only works

  • 0

I’m doing a hello world example of a backbone app, and it only works if the script src tags are contained in the body, not in the header (where I’d expect them to be). If I have them in the header and do alert(el) it says undefined. However, if I have the script src tags in the body and do alert(el) it says object HTMLBodyElement and the hello world example works. I also note that the tutorial I’m looking at has the script src tags inside the body http://arturadib.com/hello-backbonejs/ (which is the only way I can get it to work)

Why is that?

Doesn’t work 

 <!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>

Works

 <!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>

This is the 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);
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When you do this:

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

    You will have a <body> in your DOM when your scripts are loaded. In particular, you will have a <body> when you hit this:

    el: $('body')

    When you do it this way:

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

    there won’t be a <body> when you hit el: $('body') so your el will end being undefined after Backbone unwraps $('body').

    I think you’re confused about the difference between:

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

    and

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

    The first one executes the function immediately, the second one is the same as

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

    and that executes the function when the DOM is ready. You probably want your JavaScript to look more like this:

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