title: Backbone basic app, is this how it should be done?
body: <p>Hope you can have a quick look at what I'm doing here. Essentially, am I doing it right?</p>
  
  <p>Live demo of it here too: <a href="http://littlejim.co.uk/code/backbone/messing-around/" rel="nofollow">http://littlejim.co.uk/code/backbone/messing-around/</a></p>
  
  <p>I just wanted to get a solid understanding in Backbone before I go too wild. So this is a simple demonstration of creating a collection from a JSON object, passing it to a view and handling simple events. But am I approaching this right? What can I do that's better?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
      &lt;title&gt;Showing a simple view with events&lt;/title&gt;
      &lt;script type="text/javascript" src="../../media/scripts/jquery-1.5.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../../media/scripts/underscore-min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../../media/scripts/backbone-min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript" src="application.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;header&gt;
          &lt;h1&gt;Showing views from a collection and basic events&lt;/h1&gt;
          &lt;p&gt;The list below is made from JSON, passed to the view as a collection and has basic events&lt;/p&gt;
      &lt;/header&gt;
  
      &lt;article&gt;
  
      &lt;/article&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the JavaScript I currently have. I just need to know if I'm approaching this correctly?</p>
  
  <pre><code>window.App = {
  
      // namespaces
      Controller: {},
      Model : {},
      Collection : {},
      View : {},
  
      // code that starts when the app is first fired
      initialize : function () {
  
          var collection = new App.Collection.Inputs([
              {title: "Item 1"},
              {title: "Item 2"},
              {title: "Item 3"}
          ]);
  
          var view = new App.View.InputSet({collection: collection});
          $('article').html(view.render().el);
  
      }
  }
  
  /* 
  Collection: Inputs */
  App.Collection.Inputs = Backbone.Collection.extend();
  
  /* 
  View: _Input */
  App.View._Input = Backbone.View.extend({
      events: {
          "click a": "close"
      },
      // called as soon as a view instance is made
      initialize: function() {
          // this makes the render, clear etc available at this
          // if not setting this, both render() and clear() method will not have themselves in this
          _.bindAll(this, "render", "close");
      },
      // backbone required method, which renders the UI
      render: function() {
          // this is using underscore templating, which can be passed context
          $(this.el).html(_.template('&lt;p&gt;&lt;%=title%&gt; &lt;a href="#"&gt;[close]&lt;/a&gt;&lt;/p&gt;', this.model.toJSON()));
          return this;
      },
      close: function() {
          // removes the UI element from the page
          $(this.el).fadeOut(300);
          return false; // don't want click to actually happen
      }
  });
  
  /* 
  View: InputSet, uses _Input */
  App.View.InputSet = Backbone.View.extend({
      events: {
          'click a': 'clear'
      },
      initialize: function() {
          // this makes the render, clear etc available at this
          // if not setting this, both render() and clear() method will not have themselves in this
          _.bindAll(this, "render");
      },
      // backbone required method, which renders the UI
      render: function() {
  
          var that = this;
  
          views = this.collection.map(function(model) {
              var view = new App.View._Input({model: model});
              $(that.el).append(view.render().el);
              return view;
          });
  
          $(that.el).append('&lt;a href="#"&gt;[clear]&lt;/a&gt;');
  
          return this;
      },
      clear: function() {
          $(this.el).find('p').fadeOut(300);
      }
  });
  
  // wait for the dom to load
  $(document).ready(function() {
      // this isn't backbone. this is running our earlier defined initialize in App
      App.initialize();
  });
  </code></pre>