骨幹本地存儲

Question

我是新來的主幹，我正在學習一個教程，我試圖使用本地存儲作爲數據庫，但我無法找到一篇文章解釋如何一起使用它們。

這是代碼：

$(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/

我發現骨幹localStorage的插件可以節省模式，以類似瀏覽器的本地存儲this：this.collection.create（item）;但如果我刷新頁面，項目將從colelction desapear，他們不會再次在頁面上呈現。

是否有人知道如何在本地存儲器的頁面上顯示我的項目？這樣做之後我仍然需要訪問模型，因爲我想對它們執行編輯和刪除操作。

P.S.似乎在js小提琴它工作正常。但在當地它並不是。

Answer 1

我使用這個lib目錄下：https://github.com/jeromegn/Backbone.localStorage

這就是我如何在集合中定義它：

localStorage: new Store("your-storage") 

該車型將與localStorage的自動工作後。