我在使用HTML5移动应用时遇到了一些问题。
我正在从教程中学习的问题和所有的JavaScript库都很旧，所以我遇到了一些错误。我遇到的第一个问题是修改了backbone.localStorage.js文件的源代码，方法中只有2行，然后更多问题继续进行
如果我在视频中使用旧库，我的代码可以正常工作，但如果没有，如果我更改其中任何一个，某些功能将停止工作。
所以这里有一些细节：
库：
jQuery.js：在课程中他们使用的是1.5.1版本，我使用的是2.0.3版本
jQuery Mobile：在课程中他们使用版本1.0a3，我使用的是版本1.3.2
underscore.js：
Backbone.js的：
backbone.localStorage.js：
这是我的代码：
的index.html
<!DOCTYPE html>
<html>
<head>
<title>Taking Notes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.css"/>
</head>
<body>
<!-- Home page -->
<div id="home" data-role="page">
<div data-role="header">
<h1>Local Notes</h1>
<a href="#new" data-role="button" data-rel="dialog" data-transition="pop" data-icon="plus" class="ui-btn-right">New</a>
</div>
<div data-role="content">
<a href="#new" data-role="button" data-rel="dialog" data-transition="pop" data-icon="plus" data-theme="b">New note</a>
<ul data-role="listview" data-inset="true">
<li><a href="#all">All Notes</a></li>
<li><a href="#nearest">Nearest Notes</a></li>
</ul>
</div>
</div>
<!-- New Note Form -->
<div id="new" data-role="page">
<div data-role="header">
<h1>New Note</h1>
</div>
<div data-role="content">
<form action="#" method="post">
<div data-role="fieldcontain">
<label for="title">Title</label>
<input id="title" name="title" value="">
</div>
<div data-role="fieldcontain">
<label for="body">Body</label>
<textarea id="body" name="body" value=""></textarea>
</div>
<div data-role="fieldcontain">
<label for="locate">Tag With Location</label>
<select name="locate" id="locate" data-role="slider">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
<button data-icon="check" data-theme="b">Save</button>
</form>
</div>
</div>
<!-- List of Notes -->
<div id="all" data-role="page">
<div data-role="header">
<a href="#home" data-role="button" data-rel="back" data-icon="arrow-l">Back</a>
<h1>All Notes</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="all_notes">
</ul>
</div>
</div>
<!-- List of Note detail pages -->
<div id="note-detail-list">
</div>
<script type="text/template" id="note-list-item-template">
<a href="#note_<%= note.id %>" ><%= note.get('title') %></a>
</script>
<script type="text/template" id="note-detail-template">
<div data-role="header">
<a href="#home" data-role="button" data-icon="arrow-l" data-rel="back">Back</a>
<h1><%= note.get('title') %></h1>
</div>
<div data-role="content">
<%= note.get('body') %>
<% if(note.isGeoTagged()){ %>
<h3>Location</h3>
[<%= note.get('latitude') %>, <%= note.get('longitude') %>]
<% } /* End if */ %>
</div>
</script>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script type="text/javascript" src="js/underscore.js"></script>
<script type="text/javascript" src="js/backbone.js"></script>
<script type="text/javascript" src="js/backbone.localStorage.js"></script>
<script type="text/javascript" src="js/application.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.js"></script>
</body>
</html>
的application.js
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') && 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' && 'geolocation' in navigator) {
// Do geolocate
navigator.geolocation.getCurrentPosition(function(position) {
// Handle Our Geolocation Results
if(position && 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;
})();
请帮忙。我试图在很长一段时间内解决这个问题，但找不到解决办法。