Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The answer can be found by looking at the internals of <code>Backbone.View</code>.</p> <p>Looking at the constructor:</p> <pre><code> var View = Backbone.View = function(options) { this.cid = _.uniqueId('view'); this._configure(options || {}); //this function is responsible for the creation of the `this.el` property. this._ensureElement(); this.initialize.apply(this, arguments); this.delegateEvents(); }; </code></pre> <blockquote> <p>Ensure that the View has a DOM element to render into. If this.el is a string, pass it through $(), take the first matching element, and re-assign it to el. Otherwise, create an element from the id, className and tagName properties. <em><a href="http://backbonejs.org/docs/backbone.html#section-133" rel="nofollow">http://backbonejs.org/docs/backbone.html#section-133</a></em></p> </blockquote> <p>Now that we know where <code>this.el</code> comes from, have a look at the <a href="http://backbonejs.org/docs/backbone.html#section-130" rel="nofollow">events docs</a> to see how it's handled.</p> <p>The view is instantiated in <a href="https://github.com/ccoenraets/nodecellar/blob/master/public/js/main.js" rel="nofollow">main.js</a></p> <pre><code>$('#content').html(new WineView({model: wine}).el); </code></pre> <p><strong>EDIT:</strong></p> <blockquote> <p>None of which explains how the View Object's EL property is set and and how the click trigger works.</p> </blockquote> <p>I will try to explain it better:</p> <p><code>this.el</code> is created by a call to <code>this._ensureElement</code> in the <code>Backbone.View</code> constructor. We can also see that <code>this.render</code> is called from the <code>initialize</code> function which runs at instanciation time. We can see that in <code>this.render</code>, we set the content of <code>this.el</code> to the result of applying <code>this.template</code> to the model.</p> <p>Now, during the initialization process of a <code>Backbone.View</code>, right after <code>this.initialize</code> is called, the <code>events</code> config is processed by making a call to <code>this.delegateEvents</code>. This is where event listeners will get attached using the given selectors. <em>Note that most events will get attached directly to <code>this.el</code> and make use of event delegation, instead of attaching the events directly on the children elements.</em></p> <p>At this point, we are left with a <code>this.el</code> that contains all the necessary markup and has all the event listeners setup. However, <code>this.el</code> is still not part of the DOM yet. </p> <p>But from the code, we can see that <code>this.el</code> will be attached to the DOM as a children of the <code>#content</code> element after the instanciation of the view:</p> <pre><code>$('#content').html(new WineView({model: wine}).el); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POHow does this click handler get assigned to a DOM element?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USmu is too short
    1. USplalx
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow does this click handler get assigned to a DOM element?
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COOk, but the code I referenced has no id, className, tagName, NOR does it have a this.el string. So therefore it should be assigned an unattached Div tag correct? And if this.el is an unattached div tag then will the event handler still catch click events properly from the DOM?
      singulars
      1. PO
      1. USuser1813867
    2. CO@user1813867 You need to look at the code that instanciate the view. I updated the answer.
      singulars
      1. PO
      1. USplalx
    3. COOk, I don't feel that adequately answers my question. The code you added can be explained like this: We are constructing a new WineView object and passing it the wine model. If you look at the WineView constructor code you'll see this causes a call to the render method which in turn renders a model and a template to the View instance's this.el property. Then, finally, the this.el propery is used in that jquery call you just pasted to update the DOM directly to the '#content' element. None of which explains how the View Object's EL property is set and and how the click trigger works.
      singulars
      1. PO
      1. USuser1813867
 

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