Databases
StackOverflow2013
Postsdbo
POBackbone -- Nested class loading
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBackbone -- Nested class loading
    primarykey
    data
    text
    <p>I have a dog which has a breed associated to it. Right now, I just have one view, called DogView. I'm re-implementing the parse method in Dog, as specified in this StackOverflow question -> <a href="https://stackoverflow.com/questions/6535948/nested-models-in-backbone-js-how-to-approach">Nested Models in Backbone.js, how to approach</a> </p> <p>But, I'm running into issues. First, I noticed that response[key] doesn't seem to get loaded unless I explicitly call response[key].fetch on it. Second, the view is not being re-rendered. I believe it's because the change event is not being fired on the fetch as Backbone's document claims it should.</p> <p>I've set the view up to this.listenTo the model, and call this.render when it catches the event. But, I must be doing something wrong, because when I look at my output, it doesn't seem to be printing out the object (which it should, because I'm printing that out in the render method).</p> <p>I'm using backbone.js version 1.0. Just so you know, I'm still pretty new to Backbone. So, please take it easy on me. I've done a bunch of research, and have tried to figure it out on my own by looking up these other questions which were answered. Before anyone says anything about BackboneRelations, I HAVE looked at it, but I feel like jumping into learning another framework when I still don't know the base framework well enough would just be compounding the issue. :) Anyway, the code is below. I'm just going to post all of it, because it's very basic.</p> <pre><code>// The main view of the application var App = Backbone.View.extend({ // Base the view on an existing element el: $('#dogs'), initialize: function(){ var dogs = new DogList(); dogs.fetch({ success: function(data){ dogs.each(function(dog){ this.list = $('#dogsTempl'); var view = new DogView({ model: dog }); this.list.append(view.render().el); }, this); // "this" is the context in the callback } }); }, render: function(){ return this; } }); new App(); </code></pre> <p>--</p> <pre><code>var Dog = Backbone.Model.extend({ defaults: { "class": "", id: 1, name: "Enter a name", breed: {}, description: "Enter a description", age: "Enter an age", profile: null }, urlRoot: "/rest/dog", model: { breed: Breed, }, parse: function(response){ for(var key in this.model) { var embeddedClass = this.model[key]; var embeddedData = response[key]; response[key] = new embeddedClass(embeddedData, {parse:true}) console.log(response[key].toJSON()); response[key].fetch(); this.trigger('reset'); } return response; } }); </code></pre> <p>--</p> <pre><code>var DogList = Backbone.Collection.extend({ // Will hold objects of the Dog model model: Dog, url: '/rest/dog/user/'+ $('#userName').html() }); </code></pre> <p>--</p> <pre><code>var DogView = Backbone.View.extend({ tagName: 'div', template: _.template($('#dogTemplate' ).html()), initialize: function(){ this.listenTo(this.model, "reset", this.render); // Set up event listeners. The change backbone event // is raised when a property changes (like the checked field) if(!this.constructor.prototype.template) { this.constructor.prototype.template = _.template($('#dogTemplate' ).html()); console.log('compile'); } }, render: function(){ console.log(this.model.toJSON()) // Create the HTML this.$el.html(this.template(this.model.toJSON())); // Returning the object is a good practice // that makes chaining possible return this; }, editDog: function(){ this.model.toggle(); } }); </code></pre> <p>-- </p> <pre><code>var Breed = Backbone.Model.extend({ urlRoot: "/rest/breed", defaults: { id: null, history: "Please enter a history", name: "Please enter a name", origin: "Please enter a bit about where this breed came from" } }); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USKyle Richter
    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. POBackbone -- Nested class loading
      1. This table or related slice is empty.
      1. VTUpMod
    1. COAnyone? Also, if you have any additional questions or anything in order to be able to help, please just let me know.
      singulars
      1. POBackbone -- Nested class loading
      1. USKyle Richter
 

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