Databases
StackOverflow2013
Postsdbo
POHow should I bind an event to DOM elements created with a JsRender custom tag?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow should I bind an event to DOM elements created with a JsRender custom tag?
    primarykey
    data
    text
    <p>Right now, I'm binding events to the <strong>parent element</strong> of my custom tag's rendered content, then using classes to target the event onto the element which my custom tag actually renders. I feel this is likely to cause strange bugs. For instance, if anyone on my team places two custom tags using the same targeting-classes under the same immediate parent element, it would cause multiple events to fire, associated with the wrong elements.</p> <p>Here's a sample of the code I'm using now:</p> <pre><code>$.views.tags({ toggleProp: { template: '&lt;span class="toggle"&gt;{{include tmpl=#content/}}&lt;/span&gt;', onAfterLink: function () { var prop = this.tagCtx.view.data; $(this.parentElem).on('click', '.toggle', function () { prop.value(!prop.value()); }); }, onDispose: function () { $(this.parentElem).off('click', '.toggle'); } } // ... other custom tags simply follow the same pattern ... }); </code></pre> <p>By the time we hit <code>onAfterLink</code>, is there any reliable way to access the rendered DOM Element (or DOM Elements) corresponding to the custom tag itself? With no risk of hitting the wrong element by mistake? I understand that the custom tag may be text without an HTML Element, but it would still be a text node, right? (Could I even bind events to text nodes?)</p> <p>In other places, and using (far) older versions of JsViews, I've bound events after the render using (sometimes a lot of) targeting logic built into the rendered elements as <code>data-</code> attributes. Not only is this a far more fragile method than I like for accessing the rendered data, it would be incredibly risky and convoluted to try to apply this approach to some of our deeply-nested-and-collection-ridden templates.</p> <p>I also don't like needing to insert a <code>span</code> with my custom tag, just so I can apply classes to it, but if it's still necessary for the event, I'll cope.</p> <p>I ask, then, what is a safe, modular way to bind events to the DOM so that I also have access to the data rendered directly against those elements?</p> <p><strong>Edit:</strong> As an additional concern, using <code>onAfterLink</code> won't let me bind events to non-data-linked rendered content. This may be part of the design intent of JsViews vs pure JsRender, but I don't yet understand why that would be the case.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USKeen
    1. USKeen
    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. POHow should I bind an event to DOM elements created with a JsRender custom tag?
      1. This table or related slice is empty.
      1. VTUpMod
    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