骨干本地存储

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.collection.create（item）;但是如果我刷新页面，那些项目会从合作中消失，并且不会再次在页面上呈现。

是否有人知道我如何在本地存储空间中显示我的项目？这样做之后我仍然需要访问模型，因为我想对它们执行编辑和删除操作。

P.S。似乎在js小提琴它工作得很好。但是在当地它并没有。

Answer 1

我正在使用这个lib：https://github.com/jeromegn/Backbone.localStorage

这就是我在集合中定义它的方式：

localStorage: new Store("your-storage")

之后，模型将自动与 localStorage 一起使用。