Databases
StackOverflow2013
Postsdbo
POHow does this click handler get assigned to a DOM element?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow does this click handler get assigned to a DOM element?
    primarykey
    data
    text
    <p>Now that I understand Backbone a little better (I Hope) I've been going through this App with a fine tooth comb to understand how it works:</p> <p><a href="https://github.com/ccoenraets/nodecellar/tree/master/public" rel="nofollow">https://github.com/ccoenraets/nodecellar/tree/master/public</a></p> <p>The latest thing that's stumped me is the EL tag in windetails.js (here: <a href="https://github.com/ccoenraets/nodecellar/blob/master/public/js/views/winedetails.js" rel="nofollow">https://github.com/ccoenraets/nodecellar/blob/master/public/js/views/winedetails.js</a>)</p> <p>I'll paste the relevant code below, but my question is how does this view's EL property get assigned? As you'll notice in the view definition no EL tag is defined, nor is there an idTag or className property assigned. However I verified in firebug that this view is indeed listening on a DIV tag in the middle of the DOM (just underneath the content DIV actually). So how did it get attached there? If not for that the Click handler would not work properly but it does. All of the previous views which look like there were created in the same way have unattached EL properties.</p> <pre><code>window.WineView = Backbone.View.extend({ initialize: function () { this.render(); }, render: function () { $(this.el).html(this.template(this.model.toJSON())); return this; }, events: { "change" : "change", "click .save" : "beforeSave", "click .delete" : "deleteWine", "drop #picture" : "dropHandler" }, change: function (event) { // Remove any existing alert message utils.hideAlert(); // Apply the change to the model var target = event.target; var change = {}; change[target.name] = target.value; this.model.set(change); // Run validation rule (if any) on changed item var check = this.model.validateItem(target.id); if (check.isValid === false) { utils.addValidationError(target.id, check.message); } else { utils.removeValidationError(target.id); } }, beforeSave: function () { var self = this; var check = this.model.validateAll(); if (check.isValid === false) { utils.displayValidationErrors(check.messages); return false; } this.saveWine(); return false; }, saveWine: function () { var self = this; console.log('before save'); this.model.save(null, { success: function (model) { self.render(); app.navigate('wines/' + model.id, false); utils.showAlert('Success!', 'Wine saved successfully', 'alert-success'); }, error: function () { utils.showAlert('Error', 'An error occurred while trying to delete this item', 'alert-error'); } }); }, deleteWine: function () { this.model.destroy({ success: function () { alert('Wine deleted successfully'); window.history.back(); } }); return false; }, dropHandler: function (event) { event.stopPropagation(); event.preventDefault(); var e = event.originalEvent; e.dataTransfer.dropEffect = 'copy'; this.pictureFile = e.dataTransfer.files[0]; // Read the image file from the local file system and display it in the img tag var reader = new FileReader(); reader.onloadend = function () { $('#picture').attr('src', reader.result); }; reader.readAsDataURL(this.pictureFile); } }); </code></pre> <p><strong>EDIT</strong> There's been a lot of talk about this pattern: $(x).append(v.render().el)</p> <p>Someone correct me if I'm wrong but as I understand it this is a Jquery call to update the DOM at the "x" tag with the contents of the "el" property from the v object (after render is called). This technique should render content into the DOM EVEN IF the "el" property has not previously been set and is an "unattached div" provided it has had valid content previously written to it from the render method. </p> <p>However after the content has been written to the DOM the "el" property still remains an unattached div until it is directly assigned to the DOM. </p> <p>I verified through Firebug that this Backbone app has two views which are rendered this exact way and both have unattached div el properties. Those are the wineList view and the homeView. However, the 3rd view is the WineDetail view and it does not seem to have an unattached EL property. It's EL property seems to be attached and furthermore is facilitating a click event. My question is how did this EL property get attached and assigned to the DOM?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USuser1813867
    1. USuser1813867
    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
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow does this click handler get assigned to a DOM element?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COHave you read the documentation? The [`View#el`](http://backbonejs.org/#View-el) and [`View#delegateEvents`](http://backbonejs.org/#View-delegateEvents) parts might be helpful. You could always study the Backbone source too, it is fairly small, simple, and easy to understand.
      singulars
      1. POHow does this click handler get assigned to a DOM element?
      1. USmu is too short
    2. COI read it yeah. I understand that the view.delegateEvents is listening for a click action on buttons with certain classes. But I also tested and verified two scenarios. 1) Without an EL property that's attached to the DOM events will NOT trigger 2) In firebug I verified this particular view IS somehow attached to a DIV in the middle of the DOM. My question, again, is how did this EL tag get assigned?
      singulars
      1. POHow does this click handler get assigned to a DOM element?
      1. USuser1813867
    3. CO["`this.el` is created from the view's `tagName`, `className`, `id` and `attributes` properties, if specified. If not, `el` is an empty `div`."](http://backbonejs.org/#View-el) As to how it gets in the DOM, have a look at who instantiates it, the usual pattern is `v = new View; $(x).append(v.render().el)`.
      singulars
      1. POHow does this click handler get assigned to a DOM element?
      1. USmu is too short
 

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