title: Javascript Libraries update: backbone.localStorage, Backbone, Underscore, jquery, jquery mobile
body: <p>I'm having some issues working on a HTML5 Mobile App.</p>
  
  <p>Well the issue that I'm learning from a tutorial and all the javascript libraries are old so I am having some errors. The first problem I had was when modifying the source code of backbone.localStorage.js file, just 2 lines inside a method and then more issues keep on comming </p>
  
  <p>If I use the old libraries as in the videos my code works perfectly, but if not, if I change any of them some features will stop working.</p>
  
  <p>So here are some details:</p>
  
  <p>libraries:</p>
  
  <p>jQuery.js: In the course they use version 1.5.1 and I'm using version 2.0.3</p>
  
  <p>jQuery Mobile: in the course they use version 1.0a3 and I'm using version 1.3.2</p>
  
  <p>underscore.js:</p>
  
  <p>backbone.js:</p>
  
  <p>backbone.localStorage.js:</p>
  
  <p>Here is my code:</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Taking Notes&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 
      &lt;link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.css"/&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!-- Home page --&gt;
      &lt;div id="home" data-role="page"&gt;
          &lt;div data-role="header"&gt;
              &lt;h1&gt;Local Notes&lt;/h1&gt;
              &lt;a href="#new" data-role="button" data-rel="dialog" data-transition="pop" data-icon="plus" class="ui-btn-right"&gt;New&lt;/a&gt;
          &lt;/div&gt;
          &lt;div data-role="content"&gt;
              &lt;a href="#new" data-role="button" data-rel="dialog" data-transition="pop" data-icon="plus" data-theme="b"&gt;New note&lt;/a&gt;
  
              &lt;ul data-role="listview" data-inset="true"&gt;
                  &lt;li&gt;&lt;a href="#all"&gt;All Notes&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#nearest"&gt;Nearest Notes&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- New Note Form --&gt;
      &lt;div id="new" data-role="page"&gt;
          &lt;div data-role="header"&gt;
              &lt;h1&gt;New Note&lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div data-role="content"&gt;
              &lt;form action="#" method="post"&gt;
                  &lt;div data-role="fieldcontain"&gt;
                      &lt;label for="title"&gt;Title&lt;/label&gt;
                      &lt;input id="title" name="title" value=""&gt;
                  &lt;/div&gt;
  
                  &lt;div data-role="fieldcontain"&gt;
                      &lt;label for="body"&gt;Body&lt;/label&gt;
                      &lt;textarea id="body" name="body" value=""&gt;&lt;/textarea&gt;
                  &lt;/div&gt;
  
                  &lt;div data-role="fieldcontain"&gt;
                      &lt;label for="locate"&gt;Tag With Location&lt;/label&gt;
                      &lt;select name="locate" id="locate" data-role="slider"&gt;
                              &lt;option value="no"&gt;No&lt;/option&gt;
                              &lt;option value="yes"&gt;Yes&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
  
                  &lt;button data-icon="check" data-theme="b"&gt;Save&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- List of Notes --&gt;
      &lt;div id="all" data-role="page"&gt;
          &lt;div data-role="header"&gt;
              &lt;a href="#home" data-role="button" data-rel="back" data-icon="arrow-l"&gt;Back&lt;/a&gt;
              &lt;h1&gt;All Notes&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div data-role="content"&gt;
              &lt;ul data-role="listview" id="all_notes"&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- List of Note detail pages --&gt;
      &lt;div id="note-detail-list"&gt;
      &lt;/div&gt;
  
  
      &lt;script type="text/template" id="note-list-item-template"&gt;
          &lt;a href="#note_&lt;%= note.id %&gt;" &gt;&lt;%= note.get('title') %&gt;&lt;/a&gt;
      &lt;/script&gt;
  
      &lt;script type="text/template" id="note-detail-template"&gt;
          &lt;div data-role="header"&gt;
              &lt;a href="#home" data-role="button" data-icon="arrow-l" data-rel="back"&gt;Back&lt;/a&gt;
              &lt;h1&gt;&lt;%= note.get('title') %&gt;&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div data-role="content"&gt;
              &lt;%= note.get('body') %&gt;
  
              &lt;% if(note.isGeoTagged()){ %&gt;
              &lt;h3&gt;Location&lt;/h3&gt;
              [&lt;%= note.get('latitude') %&gt;, &lt;%= note.get('longitude') %&gt;]
  
              &lt;%  } /* End if */ %&gt;
          &lt;/div&gt;
      &lt;/script&gt;
  
      &lt;script type="text/javascript" src="js/jquery-2.0.3.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/underscore.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/backbone.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/backbone.localStorage.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/application.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.mobile-1.3.2.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Application.js</p>
  
  <pre><code>var NotesApp = (function(){
    var App = {
      stores: {},
      views: {},
      collections: {}
    }
  
    // Initialize localStorage Data Store
    App.stores.notes = new Store('notes');
  
  
    // Note Model
    var Note = Backbone.Model.extend({
      // Use localStorage datastore
      localStorage: App.stores.notes,
  
      initialize: function(){
        if(!this.get('title')){
          this.set({title: "Note @ " + Date() })
        };
  
        if(!this.get('body')){
          this.set({body: "No Content"})
        };
      },
  
      // Returns true if the Note is tagged with location data
      isGeoTagged: function () {
        return this.get('latitude') &amp;&amp; this.get('longitude');
      }
  
    });
  
  
    var NoteList = Backbone.Collection.extend({
      // This collection is composed of Note objects
      model: Note,
  
      // Set the localStorage datastore
      localStorage: App.stores.notes,
  
      initialize: function(){
        var collection = this;
  
        // When localStorage updates, fetch data from the store
        this.localStorage.bind('update', function(){
          collection.fetch();
        })
      }
  
    });
  
  
    // Views
    var NewFormView = Backbone.View.extend({
      events: {
        "submit form":  "createNote"
      },
  
      createNote: function(e){
        var attrs = this.getAttributes(),
            note = new Note();
  
  
        function create(){
          // Save
          note.set(attrs);
          note.save();
  
          //Close
          $('.ui-dialog').dialog('close');
          this.reset();
  
        }
  
  
        if (attrs.locate == 'yes' &amp;&amp; 'geolocation' in navigator) {
          // Do geolocate
          navigator.geolocation.getCurrentPosition(function(position) {
            // Handle Our Geolocation Results
            if(position &amp;&amp; position.coords){
              attrs.latitude = position.coords.latitude;
              attrs.longitude = position.coords.longitude
            }
            create();
  
          })
        } else{
          create();
        }
  
  
  
        // Stop browser from actually submitting the form (or following the link)
        e.preventDefault();
        // Stop jQuery Mobile from doing its form magic. We got this.
        e.stopPropagation();
  
  
      },
  
      getAttributes: function(){
        return {
          title: this.$('form [name="title"]').val(),
          body: this.$('form [name="body"]').val(),
          locate: this.$('form [name="locate"]').val()
        }
      },
  
      reset: function(){
        // Normal form.reset() would be ideal, but current causes
        // jQuery Mobile switches to fall out of sync
        this.$('input, textarea').val('');
      }
  
    });
  
  
    // Represents a listview page displaying a collection of Notes
    // Each item is represented by a NoteListItemView
    var NoteListView = Backbone.View.extend({
  
      initialize: function(){
        _.bindAll(this, 'addOne', 'addAll');
  
        this.collection.bind('add', this.addOne);
        this.collection.bind('refresh', this.addAll);
  
        this.collection.fetch();
      },
  
      addOne: function(note){
        var view = new NoteListItemView({model: note});
        $(this.el).append(view.render().el);
  
        if('mobile' in $){
          $(this.el).listview().listview('refresh');
        }
      },
  
      addAll: function(){
        $(this.el).empty();
        this.collection.each(this.addOne);
      }
  
  
    });
  
    var NoteListItemView = Backbone.View.extend({
      tagName: 'LI',
      template: _.template($('#note-list-item-template').html()),
  
      initialize: function(){
        _.bindAll(this, 'render')
  
        this.model.bind('change', this.render)
      },
  
      render: function(){
        $(this.el).html(this.template({ note: this.model }))
        return this;
      }
  
    })
  
    /* Container fore NoteDetailView
     *
     * Responsible for generating each NoteDetailView 
     */
    var NoteDetailList = Backbone.View.extend({
      // Render NoteDetailView[s] into this element
      el: $('#note-detail-list'),
  
  
      initialize: function(){
        // Make sure all functions execute with the correct 'this'
        _.bindAll(this, 'addOne', 'addAll', 'render');
  
  
        this.collection.bind('add', this.addOne);
        this.collection.bind('refresh', this.addAll);
  
        this.collection.fetch();
      },
  
      addOne: function(note){
        var view = new NoteDetailView({model: note});
        $(this.el).append(view.render().el);
        if($.mobile)
          $.mobile.initializePage();
      },
  
      addAll: function(){
        $(this.el).empty();
        this.collection.each(this.addOne);
      }
    });
  
  
    /**
    * Show Page
    */
    var NoteDetailView = Backbone.View.extend({
      // View based on a DIV tag
      tagName: "DIV",
  
  
      // Use a template to interpret vakues
      template: _.template($('#note-detail-template').html()),
  
  
      initialize: function(){
        // Make sure render is always called with this = this view
        _.bindAll(this, 'render');
  
        // Updated this div with jQuery Mobile data-role, and unique ID
        $(this.el).attr({
          'data-role': 'page',
          'id': "note_" + this.model.id
        });
  
        // Whenever the model changes, render this view
        this.model.bind('change', this.render);
      },
  
      // Render the view into this View's element
      render: function(){
        $(this.el).html(this.template({note: this.model}));
        return this;
      },
  
    });
  
  
  
  
  
    window.Note = Note;
  
    App.collections.all_notes = new NoteList(null, {
      comparator: function (note) {
        return (note.get('title') || "").toLowerCase();
      }
    });
  
    App.views.new_form = new NewFormView({
      el: $('#new')
    });
  
    App.views.list_alphabetical = new NoteListView({
      el: $('#all_notes'),
      collection: App.collections.all_notes
    });
  
    // Initialize View for collection of all Note Detail pages
    App.views.notes = new NoteDetailList({
      collection: App.collections.all_notes
    });
  
  
  
  
  
  
  
  
  
    return App;
  })();
  </code></pre>
  
  <p>Please help. I've being trying to solve this for a very long time and can't find the solution.</p>