Databases
StackOverflow2013
Postsdbo
POLoading collections into models in backbone.js
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLoading collections into models in backbone.js
    primarykey
    data
    text
    <p>Here's the goal: I have a <code>parent</code> model. It is in a collection called <code>parents</code>. In a <code>parent</code> is a collection of <code>children</code>. So, when I instantiate the <code>parents</code> collection, I get the <code>parent</code> models, each with the collection of <code>children</code> in them.</p> <p>I've tried doing this several different ways, and I'm getting different performance. Sometimes the <code>children</code> don't show up at all. Sometimes, they are repeated for each iteration of the <code>parent</code> render loop. I'm looking for help on what the best practice is for doing this.</p> <p>The list of <code>children</code> shouldn't change, it should be the same collection each time. I can filter for differences later, on the fly.</p> <p>I've stripped it down to be as simple as possible to just pull data, no other extras are included to make it clear what needs to happen.</p> <p>I load the <code>children</code> collection twice. (Well, lot's of times, but once in the <code>parent</code> collection and once in each <code>parent</code> model). This is so that I can add a new 'Parent' and have access to the children so I can add them to the 'Parent' model before saving.</p> <p><strong>THE QUESTIONS:</strong></p> <ul> <li>How to I make sure that the <code>Children</code> are loaded into the <code>Parent</code> only once?</li> <li>How do I load one <code>Children</code> collection into the <code>Parents</code> collection?</li> <li>Is this the right way to do this?</li> </ul> <p>Models:</p> <pre><code>$(function() { window.Child = Backbone.Model.extend({}); window.Children = Backbone.Collection.extend({ model: Child }); window.Parent = Backbone.Model.extend({ initialize: function() { this.children = new Children(); children.fetch(); } }); window.Parents = Backbone.Collection.extend({ model: Parent initialize : function() { this.childrenAll = new Children(); this.childrenAll.fetch(); } }); // instantiate the collections window.parents = new Parents(); }); </code></pre> <p>My Views:</p> <pre><code>$(function() { window.ChildView = Backbone.View.extend({ className: "child-item", template: _.template($('#child-template').html()), initialize: function () { _.bindAll(this, 'render'); this.model.bind('change', this.render); }, render: function() { this.$el.html(this.template(this.model.toJSON())); return this; } }); window.ChildrenView = Backbone.View.extend({ className: 'children', template: _.template($('#children-template').html()), initialize: function() { _.bindAll(this, 'render'); this.collection.bind('reset', this.render); }, render: function() { this.$el.html(this.template()); this.collection.each(function(child) { var view = new ChildView({ model:child }); $('.children-list').append(view.render().el); }); return this; } }); window.ParentView = Backbone.View.extend({ className: "parent", template: _.template($('#parent-template').html()), initialize: function () { _.bindAll(this, 'render'); this.model.bind('change', this.render); }, render: function() { this.$el.html(this.template(this.model.toJSON())); this.children = new Children({ collection: children }); $('.children-list').html(this.children.render().el); return this; } }); window.ParentsView = Backbone.View.extend({ el: "#app", template: _.template($('#parents-template').html()), initialize: function () { _.bindAll(this, 'render', 'add'); this.collection.bind('reset', this.render); }, render: function() { this.$el.html(this.template()); this.childrenView = new ChildrenView({ collection: children }); $('.children-new').append(this.childrenView.render().el); this.collection.each(function(parent){ var view = new ParentView({ model: note }); $('#items-list').prepend(view.render().el); }); return this; } }); }); </code></pre> <p>The Router:</p> <pre><code>$(function() { window.ParentsRouter = Backbone.Router.extend({ routes: { '': 'list' }, initialize: function() { // starts by assigning the collection to a variable so that it can load the collection this.parentsView = new ParentsView({ collection: parents }); parents.fetch({ reset: true }); }, list: function () { $('#app').empty(); $('#app').append(this.parentsView.render().el); } }); window.parentsRouter = new ParentsRouter(); Backbone.history.start(); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDave Merwin
    1. USDave Merwin
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COWhat is the question?
      singulars
      1. POLoading collections into models in backbone.js
      1. USfbynite
    2. COI can't believe I added all that and never asked a question. The questions have been added.
      singulars
      1. POLoading collections into models in backbone.js
      1. USDave Merwin
 

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