Магистральные: синхронизация Модели и LocalStorage

Question

Я расширили модель А и коллекцию As следующим образом:

define(['underscore', 'backbone', 'backbone.localStorage'], function(_, Backbone) { 
    var A = Backbone.Model.extend({ 
     initialize: function() {   
     } 
    }); 

    var A_Collection = Backbone.Collection.extend({ 
     model: A, 
     localStorage: new Backbone.LocalStorage("as") 
    }); 

    return { 
     Model: A, 
     Collection: A_Collection 
    }; 
}); 

Коллекция хранится в LocalStorage и все прекрасно работает в моем приложении. Тогда я ясно и заменить LocalStorage непосредственно по коду (с использованием четких и SetItem функций) и попытаться создать экземпляр новой коллекции, но эти изменения не обнаружены:

var aux = new A.Collection(); 
aux.fetch(); 
// aux is empty 

В противном случае, если попытка:

var aux = new A.Collection(); 
aux.localStorage = new Backbone.LocalStorage("as"); 
aux.fetch(); 
// aux contains new data 

Последнее не подходит для меня, потому что мне придется изменить все создания коллекций в моем проекте.

Что мне не хватает?

Answer 1

Экземпляры Backbone.LocalStorage не предназначены для прослушивания LocalStorage, которые происходят не в своем его коде. Вот почему вы получаете поведение, которое получаете. Однако есть обходной путь.

При определении коллекции, как это:

var A_Collection = Backbone.Collection.extend({ 
    model: A, 
    localStorage: new Backbone.LocalStorage("as") 
}); 

значение localStorage разделяется всеми экземплярами A_Collection. Вы можете автоматически создать новый экземпляр Backbone.LocalStorage, как это:

var A_Collection = Backbone.Collection.extend({ 
    model: A, 
    initialize: function() { 
    A_Collection.__super__.initialize.apply(this, arguments); 
    A_Collection.prototype.localStorage = new Backbone.LocalStorage("as"); 
    }, 
}); 

Мы должны установить его на прототип, так что он разделяет все инстанции A_Collection, что такое же поведение, что и исходный код. С этим на месте, всякий раз, когда вы создаете новый экземпляр A_Collection, вы получите новый экземпляр Backbone.LocalStorage, который получит информацию заново от LocalStorage.

Описание: plunker. Вот соответствующий код, для справки:

var A = Backbone.Model.extend({ 
    initialize: function() {} 
}); 

var A_Collection = Backbone.Collection.extend({ 
    model: A, 
    initialize: function() { 
    A_Collection.__super__.initialize.apply(this, arguments); 
    A_Collection.prototype.localStorage = new Backbone.LocalStorage("as"); 
    }, 
}); 

// Setup a collection. 
var collection = new A_Collection(); 
collection.fetch(); 

// Clean it out from previous runs... Note that we have to use destroy to destroy all items. 
// Reset won't save to LocalStorage. 
while (collection.length > 0) { 
    var model = collection.at(0); 
    model.destroy(); 
    collection.remove(model); 
} 
// and set some elements. 
collection.create({ 
    name: "1" 
}); 
collection.create({ 
    name: "2" 
}); 
console.log("collection length:", collection.length); 

// Mess with it outside the Backbone code. 
localStorage.clear(); 
// Manually create data that looks like what Backbone expects. 
localStorage.setItem("as-1", JSON.stringify({ 
    name: "foo", 
    id: "1" 
})); 
localStorage.setItem("as-2", JSON.stringify({ 
    name: "bar", 
    id: "2" 
})); 
localStorage.setItem("as-3", JSON.stringify({ 
    name: "baz", 
    id: "3" 
})); 
localStorage.setItem("as", "1,2,3"); 

// Create a new collection that loads from LocalStorage 
var collection2 = new A_Collection(); 
collection2.fetch(); 
console.log("collection 2 length:", collection2.length); 
console.log("first item", collection2.at(0).toJSON()); 
console.log("third item", collection2.at(2).toJSON()); 

console.log("instance is shared?", collection.localStorage === collection2.localStorage); 

Код выше генерирует это на консоли:

collection length: 2 
collection 2 length: 3 
first item Object {name: "foo", id: "1"} 
third item Object {name: "baz", id: "3"} 
instance is shared? true