Databases
StackOverflow2013
Postsdbo
POModel change events in nested collections not firing as expected
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POModel change events in nested collections not firing as expected
    primarykey
    data
    text
    <p>I'm trying to use backbone.js in my first "real" application and I need some help debugging why certain model change events are not firing as I would expect.</p> <p>If I create a collection from a JSON <em>array</em> from the server, then fetch() it at set intervals, I do not get notified if an individual model in the collection has changed. The backbone documentation suggests that such notifications should be generated. All I seem to get is a refresh notification on each fetch, which is not useful. OTOH, if I create a model from a JSON <em>object</em> from the server, then fetch() the model at set intervals, I do get a change notification when an attribute changes. Any ideas?</p> <p><strong>Details</strong></p> <p>My web service at /employees/{username}/tasks returns a JSON array of task objects, with each task object nesting a JSON array of subtask objects. For example,</p> <pre><code>[{ "id":45002, "name":"Open Dining Room", "subtasks":[ {"id":1,"status":"YELLOW","name":"Clean all tables"}, {"id":2,"status":"RED","name":"Clean main floor"}, {"id":3,"status":"RED","name":"Stock condiments"}, {"id":4,"status":"YELLOW","name":"Check / replenish trays"} ] },{ "id":47003, "name":"Open Registers", "subtasks":[ {"id":1,"status":"YELLOW","name":"Turn on all terminals"}, {"id":2,"status":"YELLOW","name":"Balance out cash trays"}, {"id":3,"status":"YELLOW","name":"Check in promo codes"}, {"id":4,"status":"YELLOW","name":"Check register promo placards"} ] }] </code></pre> <p>Another web service allows me to change the status of a specific subtask in a specific task, and looks like this: /tasks/45002/subtasks/1/status/red [aside - I intend to change this to a HTTP Post-based service, but the current implementation is easier for debugging]</p> <p>I have the following classes in my JS app:</p> <p><strong>Subtask Model and Subtask Collection</strong></p> <pre><code>var Subtask = Backbone.Model.extend({}); var SubtaskCollection = Backbone.Collection.extend({ model: Subtask }); </code></pre> <p><strong>Task Model with a nested instance of a Subtask Collection</strong></p> <pre><code>var Task = Backbone.Model.extend({ initialize: function() { // each Task has a reference to a collection of Subtasks this.subtasks = new SubtaskCollection(this.get("subtasks")); // status of each Task is based on the status of its Subtasks this.update_status(); }, ... }); var TaskCollection = Backbone.Collection.extend({ model: Task }); </code></pre> <p><strong>Task View to renders the item and listen for change events to the model</strong></p> <pre><code>var TaskView = Backbone.View.extend({ tagName: "li", template: $("#TaskTemplate").template(), initialize: function() { _.bindAll(this, "on_change", "render"); this.model.bind("change", this.on_change); }, ... on_change: function(e) { alert("task model changed!"); } }); </code></pre> <p>When the app launches, I instantiate a TaskCollection (using the data from the first web service listed above), bind a listener for change events to the TaskCollection, and set up a recurring setTimeout to fetch() the TaskCollection instance. </p> <pre><code>... TASKS = new TaskCollection(); TASKS.url = ".../employees/" + username + "/tasks" TASKS.fetch({ success: function() { APP.renderViews(); } }); TASKS.bind("change", function() { alert("collection changed!"); APP.renderViews(); }); // Poll every 5 seconds to keep the models up-to-date. setInterval(function() { TASKS.fetch(); }, 5000); ... </code></pre> <p>Everything renders as expected the first time. But at this point, I would expect either (or both) a Collection change event or a Model change event to get fired if I change a subtask's status using my second web service, but this does not happen. </p> <p>Funnily, I did get change events to fire if I added one <em>additional</em> level of nesting, with the web service returning a single model, for example:</p> <pre><code>"employee":"pkaushik", "tasks":[{"id":45002,"subtasks":[{"id":1..... </code></pre> <p>But this seems klugey... and I'm afraid I haven't architected my app right. I'll include more code if it helps, but this question is already rather verbose.</p> <p>Thoughts?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USLightness Races in Orbit
    1. USPallavi Anderson
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POModel change events in nested collections not firing as expected
      1. USjslatts
      1. VTFavorite
    2. VO
      singulars
      1. POModel change events in nested collections not firing as expected
      1. USdevth
      1. VTFavorite
    3. VO
      singulars
      1. POModel change events in nested collections not firing as expected
      1. USambertch
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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