我是骨干新手，我正在学习一个教程，我正在尝试将本地存储用作数据库，但我找不到一篇解释如何一起使用它们的文章。
这是代码：
$(function() {
window.app = {
Models: {},
Collections: {},
Views: {}
};
window.template = function(id) {
return _.template($('#' + id).html());
}
//Item model
app.Models.Item = Backbone.Model.extend({
defaults: {
title: ''
}
});
//items collection
app.Collections.ItemsList = Backbone.Collection.extend({
// reference to the model
model: app.Models.Item,
//save all items in local storage
localStorage: new Backbone.LocalStorage('items-store')
});
//the items list
app.Views.Items = Backbone.View.extend({
tagName: 'ul',
initialize: function() {
this.collection.on('add', this.addOne, this);
},
render: function() {
//for each element in the collection call the add one function
this.collection.each(this.addOne, this);
return this;
},
addOne: function(itemModel) {
// create a new child view
var itemView = new app.Views.Item({model: itemModel});
//append to the root element
this.$el.append(itemView.render().el);
}
});
// one item view
app.Views.Item = Backbone.View.extend({
//tag name of the view
tagName: 'li',
template: template('itemTemplate'),
events: {
'click .edit': 'editModel'
},
initialize: function() {
//rerender the model whet the text is changed
this.model.on('change', this.render, this);
},
render: function() {
//render the template
var template = this.template(this.model.toJSON());
//tale the list item and populate it with the associated model
this.$el.html(template);
return this;
},
editModel: function() {
//prompt the user to change the text
var newValue = prompt('You want to change the text?', this.model.get('title'));
//if cancel is pressed
if(!newValue) { return};
//add the new value to the model
this.model.set('title', newValue);
}
});
//add new item view
app.Views.AddItem = Backbone.View.extend({
el: '#addItem',
collection: new app.Collections.ItemsList,
events: {
'submit' : 'submit'
},
initialize: function() {
this.collection.fetch({reset: true});
//call the Items view
var items = new app.Views.Items({collection: this.collection});
//populate the itemsList with the ul
$('#itemsList').html(items.render().el);
//this is just for demo purpose
this.store();
},
submit: function(e) {
e.preventDefault();
//get the value from the input
var newTaskTitle = this.$el.find('input[type=text]').val();
//create a new model with the value from newTaskTitle
var item = new app.Models.Item({title: newTaskTitle});
//create the collection in order to trigger the localstorage plugin
this.collection.create(item);
//this is just for demo purpose
this.store();
},
store: function() {
//this is just for demo purpose
//items in local storage
for(var i = 0; i < localStorage.length; i++) {
var obj = localStorage.getItem(localStorage.key(i));
$('.number span').html(localStorage.length);
$('#localStorage').append('<div>' + i + '---' + obj + '</div>');
}
}
});
//dummy collection
var itemsCollection = new app.Collections.ItemsList([
{
title : 'go home'
},
{
title : 'go home1'
},
{
title : 'go home2'
}
]);
//call the view with the dummy collection
// var addItems = new app.Views.AddItem({collection: itemsCollection});
// //call the view without the collection
var addItems = new app.Views.AddItem();
//end of function
}());
编辑：代码已更改，jsfiddle 已更新：http: //jsfiddle.net/9z0cc6r8/1/
我发现主干本地存储插件将模型保存到浏览器的本地存储中，如下所示：this.collection.create(item); 但是如果我刷新页面，这些项目就会从集合中消失，并且它们不会再次呈现在页面上。
有谁知道我如何从本地存储在页面上显示我的项目？这样做后我仍然需要访问模型，因为我想对它们执行编辑和删除操作。
PS似乎在js fiddle上它工作正常。但在本地却没有。