Note that there are some explanatory texts on larger screens.

plurals
  1. PObackbone.js collection not properly removing item in view
    primarykey
    data
    text
    <p>I'm having some trouble deleting an item from a collection inside a model when in a view. Basically the model/collection structure is the following:</p> <p><img src="https://i.stack.imgur.com/MeB3g.png" alt="enter image description here"></p> <p>Basically when I try to remove an item from the sub item collection in the sub item view it actually removes the correct item from the collection. However when I come to persisting the main model the item seems to be still in the collection.<br> This is the how my views are structured: </p> <p><img src="https://i.stack.imgur.com/gHq1q.png" alt="enter image description here"></p> <p>The main view inserts the DOM nodes required by the main model, and them main model creates a new view for the item model etc. All views are getting the main model as model option like so: </p> <pre><code>new App.Views.MainModelView({ model : this.model, el : $('#nodeID') }) </code></pre> <p>The only difference is in the creation of the Sub-item model view, where, due to re usability of the view and template, I still pass in the main model, however I also pass in the item in the item collection that is currently being modified. Which looks like this:</p> <pre><code>new App.Views.ItemView({ model : this.model, item : this.selectedItem, el : $('#nodeID') }); </code></pre> <p>In the sub-item's view init method I do the following:</p> <pre><code>this.item = (this.options.item) ? this.options.item : this.model; </code></pre> <p>To remove a sub-item from the sub-item collection I do:</p> <pre><code>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); }, </code></pre> <p>As I said earlier when I remove the sub-item and I inspect the collection modified by the view I can see that the sub-item has been removed from the collection, however then I persist the main model the removed sub-item re-appears. The leads me to believe that somewhere along the line the sub-item collection might be cloned which could explain the sudden reappearance of the sub-item.</p> <p>I know this is a fairly specific problem and I'm not sure if it is possible to get to the cause of the problem with what I have provided here, if you need any more information please let me know.</p> <p>Thanks for all your help,</p> <p>Vincent</p> <p>========== EDIT ============</p> <p>To answer some of the questions below let me outline the scope in which I am experiencing this issue:</p> <p>If I console log the this.item.subItems collection in the SubItem view, after removeSubItem was called, I can see that the instance of the SubItem model has been removed successfully. Before I call the save method on the main model I console log the return of the toJSON function. At this point I am experiencing the problem that the previously removed instance is 'back' in the collection. I have been monitoring the traffic between client and server with both Wireshark and Google chrome's developer console and there is no call to the server to refresh any of the models.</p> <p>The toJSON method for the SubItem collection looks like this:</p> <pre><code>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; } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload