kolekcja backbone.js nieprawidłowo usuwa element w widoku

Question

Mam problem z usunięciem elementu z kolekcji wewnątrz modelu w widoku. Zasadniczo struktura modelu/kolekcja jest następujący:

Zasadniczo, gdy próbuję usunąć element z kolekcji sub elementu w pozycji sub zobaczyć to faktycznie usuwa właściwej pozycji z kolekcji. Jednak gdy przychodzę do utrzymania modelu głównego, wydaje się, że przedmiot wciąż znajduje się w kolekcji.
To jak moje poglądy są tak skonstruowane:

Główny widok wstawia węzłów DOM wymaganych przez głównego modelu, a ich głównym modelem tworzy nowy widok dla modelu poz itp Wszystkie widoki są coraz główny model jako opcja modelu tak:

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

Jedyna różnica polega na stworzeniu modelu widoku podpunkt, w którym, ze względu na ponowne użyteczność widzenia i szablonu, nadal przechodzą w głównym model, jednak przechodzę także do elementu w kolekcji item, która jest cur czynsz jest modyfikowany. Który wygląda tak:

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

W metodzie widok Init podpunktu za I wykonaj następujące czynności:

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

Aby usunąć podpunkt z kolekcji podpunkt robię:

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); 
}, 

Jak już wspomniałem wcześniej, kiedy usuwam podpunkt i sprawdzam kolekcję zmodyfikowaną przez widok, widzę, że podelement został usunięty z kolekcji, jednak wtedy utrzymuję główny model usuniętego pod-elementu. element ponownie się wyświetla. Prowadzi mnie to do przekonania, że ​​gdzieś po linii można sklonować kolekcję podpunktu, co mogłoby wyjaśnić nagłe ponowne pojawienie się podpunktu.

Wiem, że jest to dość specyficzny problem i nie jestem pewien, czy możliwe jest dotarcie do przyczyny problemu z tym, co tu podałem, jeśli potrzebujesz więcej informacji, proszę dać mi znać.

Dzięki za pomoc,

Vincent

========== EDIT ============

Aby odpowiedzieć na niektóre poniższe pytania pozwalają mi przedstawić zakres, w którym doświadczam tego problemu:

Jeśli konsola loguje kolekcję this.item.subItems w widoku SubItem, po wywołaniu metody removeSubItem widzę, że wystąpienie SubItem model został pomyślnie usunięty. Zanim zadzwonię do metody zapisu na głównym modelu, konsola zarejestruje powrót funkcji toJSON. W tym momencie mam problem, że poprzednio usunięta instancja jest "wstecz" w kolekcji. Monitorowałem ruch między klientem a serwerem zarówno za pomocą Wireshark, jak i konsoli deweloperów Google Chrome i nie było żadnego połączenia z serwerem, aby odświeżyć którykolwiek z modeli.

Metoda toJSON do zbierania podpunkt wygląda następująco:

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; 
} 

Answer 1

backbone.js wsparcie dla kolekcji zagnieżdżonych/modeli jest nie- istnieją i nie zapewniają żadnego wsparcia na oszczędzanie (patrz http://documentcloud.github.com/backbone/#FAQ-nested). Musisz nadpisać do JSON w dowolnym modelu z podkolekcją. Mylę się z tym scenariuszem milion razy. Jeśli masz coś podobnego (w coffeescript):

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) 

potem w kolejności dla mainModel.save() do pracy, trzeba zastąpić toJSON na MainModel i ItemModel, jak:

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()}) 

pisałem przykład w coffeescript, ponieważ jest znacznie bardziej zwięzły niż javascript. Jeśli potrzebujesz jakiejkolwiek pomocy, proszę zapytaj.

Mam nadzieję, że to pomoże!

--- Uwaga ---

Technicznie w coffeescript, metody toJSON może być po prostu:

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

ale napisałem to tak zrobiłem się bardziej zrozumiałe dla osób niebędących coffeescripters .

Answer 2

Nie patrząc na całej swojej bazy kodu myślę, że masz swoją strukturę nieco źle. Zwykle z kręgosłupem prawie nigdy nie przekazuję elementu: el bezpośrednio do widoku. Widok jest odpowiedzialny za wygenerowanie własnego el. Po zakończeniu renderowania wstawiam nowy plik view.el do DOM. Tak jak poniżej:

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

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

W powyższym przypadku istnieje obiekt szkieletu z każdym wykiem. Jeśli potrzebujesz usunąć podgląd, nie musisz robić kwerendy wyboru, aby go znaleźć, po prostu zadzwoń metody usuwania na obiekcie i wie, jak usunąć się z domu.

Albo być bardziej konkretna jest podrzędny obsługuje zdarzenie click na siebie, które to może wtedy obsługiwać niszcząc to związane modelu, a następnie wywołanie usunąć na siebie