バックボーン：同期モデルとのlocalStorage

Question

次のように通り、私はモデルAとのコレクションを拡張しました：

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に保存され、すべては私のアプリケーションで正常に動作します。その後、私ははっきりと（明確とSetItem関数の機能を使用して）コードで直接のlocalStorageを交換し、新しいコレクションをインスタンス化しようとするが、変更は検出されません。

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のインスタンスは、独自のコード外で発生する変更をlistenするようには設計されていません。そういうわけで、あなたが得ている行動を得ることができます。ただし、回避策があります。

あなたはこのようなコレクションを定義しますlocalStorage値はA_Collectionのすべてのインスタンスで共有され

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

を。あなたは、自動的にこのように、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