2011-07-13 15 views
7

ビュー内でモデル内のコレクションからアイテムを削除する際に問題が発生します。基本的にはモデル/コレクション構造は以下の通りです:backbone.jsコレクションが表示内のアイテムを正しく削除していません

enter image description here

基本的に私は、サブ項目にサブアイテムコレクションから項目を削除しようとすると、実際にそれを見るコレクションから正しい項目を削除します。しかし、私がメインモデルを維持するために来るとき、そのアイテムはまだコレクションに入っているようです。
これは私の意見はどのように構成されるか:

enter image description here

メインビューは、メインモデルで必要とされるDOMノードを挿入し、それらをメインモデルがなどすべてのビューがあるアイテムモデルの新しいビューを作成しますそのようなモデルのオプションとしてメインモデル取得:

new App.Views.MainModelView({ 
    model : this.model, 
    el : $('#nodeID') 
}) 

を唯一の違いは、ビューとテンプレートの使いやすさを再に起因する、私はまだメインに渡し、小項目モデルビューの作成でありますモデルではありますが、私はまた、アイテムコレクションの中のitemレンタルされています。これは以下のようになります。私は、次の操作を行い、サブアイテムのビューinitメソッドで

new App.Views.ItemView({ 
    model : this.model, 
    item : this.selectedItem, 
    el : $('#nodeID') 
}); 

this.item = (this.options.item) ? this.options.item : this.model; 

私は、サブアイテムコレクションからサブ項目を削除するには:

removeSubItem : function(e) { 
    // get the id of the sub-item to be removed 
    var id = $(e.target).closest('tr').attr('data-id'); 
    if (!id) throw "Could not retrieve data id"; 
    // retrieve the sub-item from the collection 
    var subItem = this.item.subItems.get(id); 
    // remove the sub-item from the collection 
    this.item.subItems.remove(subItem); 
}, 

前に述べたように、サブアイテムを削除してビューで修正されたコレクションを調べると、サブアイテムがコレクションから削除されていることがわかりますが、アイテムが再表示されます。私は、サブアイテムの突然の出現を説明することができるサブアイテムのコレクションがクローンされる可能性があると考えています。

これはかなり特殊な問題であることは知っていますが、これ以上の情報が必要な場合は、私がここで提供している問題の原因になるかどうかはわかりません。すべてのあなたの助けを

おかげで、

ヴィンセント

==========のいくつかに答えるためにEDIT ============

以下の質問では、この問題が発生している範囲を概説します。

私がコンソールにthis.item.subItemsコレクションをSubItemビューに記録すると、removeSubItemが呼び出された後、私はSubItemのインスタンスモデルが正常に削除されました。 メインモデルのsaveメソッドを呼び出す前に、IコンソールはtoJSON関数の戻り値を記録します。この時点で、以前に削除されたインスタンスがコレクション内に「戻る」という問題が発生しています。私はWiresharkとGoogle Chromeの開発者コンソールの両方でクライアントとサーバーの間のトラフィックを監視しており、モデルを更新するサーバーへの呼び出しはありません。

サブ項目コレクションのtoJSONメソッドは次のようになります。

toJSON : function() { 
    App.log(["SubItem::collection::toJSON", this], "info"); 
    var json = {}; 
    // make sure the key for each SubItem is the primary key 
    this.each(function(subItem) { 
    json[subItem.get('id')] = subItem.toJSON(); 
    }); 

    return json; 
} 
+0

「永続化」とはどのような意味があるのか​​、どうやってどのようにリロードするのかを説明してください。 – Julien

+0

私が永続化を話すとき、私はサーバー上にモデルを保存することを意味します。したがって、メインモデルでsaveメソッドを呼び出します。保存は、一連のネイティブまたはオーバーライドされたtoSSONメソッドを使用して行われます。詳細は編集をご覧ください。 – luxerama

答えて

2

BACKBONE.JSサポートが非で自身に削除を呼び出すことによって処理することができ、それ自体のクリックイベントを処理します。具体的には存在しておらず、貯蓄支援を提供していない(http://documentcloud.github.com/backbone/#FAQ-nested参照)。あなたはsubcollectionを持つ任意のモデルでtoSONをオーバーライドする必要があります。私はこのシナリオを100万回実行しました。あなたは(のCoffeeScriptで)のようなものがある場合:私が書いた

class MainModel extends Backbone.Model 

    itemCollection: -> 
     @_itemCollection ?= new ItemCollection(@get('itemCollection')) 

    toJSON: -> 
     return _.extend(@attributes, {itemCollection: @itemCollection().toJSON()}) 


class ItemModel extends Backbone.Model 

    subCollection: -> 
     @_subCollection ?= new SubCollection(@get('subCollection')) 

    toJSON: -> 
     return _.extend(@attributes, {subCollection: @subCollection().toJSON()}) 

class MainModel extends Backbone.Model 

    itemCollection: -> 
     @_itemCollection ?= new ItemCollection(@get('itemCollection')) 


class ItemCollection extends Backbone.Collection 

    model: ItemModel 


class ItemModel extends Backbone.Model 

    subCollection: -> 
     @_subCollection ?= new SubCollection(@get('subCollection')) 


class SubCollection extends Backbone.Collection 

    model: SubModel 


class SubModel extends Backbone.Model 


mainModel = new MainModel(json) 

を次に動作するmainModel.saveため()で、あなたは次のように、MainModelとItemModelにtoJSONをオーバーライドする必要がありますそれはjavascriptよりはるかに簡潔なので、coffeescriptの例です。それを理解する助けが必要な場合は、ただ聞いてください。

希望すると便利です。

---注意---

技術的には、CoffeeScriptの中で、toJSONメソッドは、単純に次のようになります。

toJSON: -> 
    _.extend @attributes, itemCollection: @itemCollection().toJSON() 

しかし、私はそれを私が非coffeescriptersに、より理解しやすいように行った方法を書きました。

1

あなたの全体のコードベースを見なければ、私はあなたがあなたの構造が少し間違っているかもしれないと思います。通常、バックボーンでは:el要素をビューに直接渡すことはほとんどありません。ビューは、それ自身のelを生成する責任があります。レンダリングされた後、新しいview.elをDOMに挿入します。以下のように

var subView = new FooView({ model: fooModel }); 

mainView.$(".list").append(subView.el); 

上記のケースでは、すべてのサブビューにバックボーンオブジェクトがあります。 サブビューを削除する必要がある場合、サブビューを検索するためにセレクタクエリを実行する必要はありません。 オブジェクトのremoveメソッドを呼び出すだけで、domから自分自身を削除する方法を知ることができます。

またはサブビューが、それは は、それがモデルを関連付けられています破壊して、ネストされたコレクション/モデル用

関連する問題