Get delegated target for flight component event

Question

Flight has a great eventing system, and makes it easy to setup event handlers for component nodes. However, a couple things eluded me when trying to respond to delegated events for nodes that contained dynamic elements.

Here's the situation:

   <div class="component">
       <ul id="list">
           <!-- dynamic elements show here -->
       </ul>
   </div>

and the component:

var ItemComponent = (function() {

  function ItemComponent() {
      this.defaultAttrs({
        listSelector: '#list',
        itemSelector: '#list li'
      });

      this.addItem = function(ev, params) {
        var item = $('<li>'),
            link = $('<a href="#">').html(params.content);
        this.select('listSelector').append(item.append(link));
      };

      this.itemClick = function(ev, params) {
        console.log("Item clicked: target=", ev.target);
        console.log("Item clicked: currentTarget=", ev.currentTarget);
      };

      this.after('initialize', function() {
        this.on(document, 'uiAddListItem', this.addItem);
        this.on('click', { 'itemSelector': this.itemClick });
      });
  }

  return flight.component(ItemComponent);

})();

$('#add-item-btn').on('click', function(){
  $(document).trigger('uiAddListItem', {
    content: $('input[name="item-content"]').val()
  });
});

ItemComponent.attachTo('.component');

This basically just let's the user add li items to a list. Each <li> has content that is wrapped in an <a> element. However, when the handler runs, we'd like to access the actual <li> element and not the <a> element that received the click event.

In the itemClick handler, the event.target element is the one that received the click, in this case the <a> element. And the event.currentTarget is the actual component the events are bound too (<div class="component">).

How do you get the delegated, dynamic <li> element in this case?

Here's the working JSBin

score 1 · Answer 1 · answered Jun 06 '14 at 18:34

So, the online Flight.js docs didn't mention getting at dynamic, delegated targets for events like this (having looked now, the docs are up-to-date, so this is actually mentioned here now).

But, since it might be missed by some, or hard to find for others, I thought I would mention that the dynamic, delegated target of the event can be gotten at via the second parameter to the event handler in the property named el.

So, for our handler, we could do it this way:

this.itemClick = function(ev, params) {
    console.log("Actual Target: ", params.el);
};

Now, why was the delegated target actually stuffed into the data parameter for the handler, when in fact the developer might actually stomp on it, I'm not sure. It might have been a better idea to attach it to the event parameter as ._el or something similar.

Hopefully this little tidbit will help folks out who are moving over to the twitter Flight.js framework.

Yeah, it's a pretty dirty hack that one. I think the Flight team wanted to fix it, but have left it in place because so many people are relying on it. — Tom Hamshere, Dec 03 '14 at 22:21
This was a bug in the Flight's delegate utility (used by the Flight's event system). It is fixed in 1.4.0 see http://git.io/ga__mg and http://git.io/UiF1ZA now you can use `event.currentTarget` — G.G., Jan 24 '15 at 06:22

Get delegated target for flight component event

1 Answers1