Agility.js + jQueryUI, pass parameters to event handlers in controller

Question

The Agility.js documentation seems to say pretty clearly that Agility objects can accept any valid jQuery event type:

Usual DOM events such as click, dblclick, mouseenter, etc are supported through jQuery's event API. Please consult jQuery's API for a list of events supported.

But in the docs and in all other examples I've seen, all the controller functions bound to events take no parameters. For example, the following snippet is taken straight out of the online docs:

var button = $$({msg:'Click me'}, '<button data-bind="msg"/>', {
  'click &': function() {
    this.model.set({msg:"I've been clicked!"});
  }
});
$$.document.append(button);

Here the lambda attached to the click event obviously is parameterless. This works OK for ordinary jQuery events, but to use jQueryUI events, each event function has associated data. For example, if I want to use Draggable and Droppable widgets, the drop() function is called on the Droppable to indicate that a Draggable has been dropped onto it, and I need the parameters to drop(event, ui) to figure out which Draggable it was.

Is there any way to declare my controller event handlers so that I can get access to those parameters? Alternatively, is there some other way to do what I'm trying to do? Not getting any information about an event on a controller other than "it fired" seems like a real shortcoming here. I'm not even sure it is possible to extend Agility so that it can handle events other than the standard DOM ones, although I don't see any reason why it shouldn't be, from my reading of the code.

Agility does provide a trigger() function for client code to fire events, which allows for parameters other than the event type. I thought of wiring that up to the jQueryUI event somehow, but I don't see quite how. More to the point, why can you even pass parameters to trigger() if controllers can't see them?

Answer 1

That the example does not show it is unfortunate, but that doesn't mean the argument is not there.

var button = $$({msg:'Click me'}, '<button data-bind="msg"/>', {
  'click &': function(jqEvent) {
    this.model.set({msg:"I've been clicked!" + jqEvent.target.nodeName});
  }
});
$$.document.append(button);

When in doubt just include a console.log(arguments) in your event handlers and see for yourself. You will get the same arguments jQuery gives you.

If you experiment with .trigger() and extra params you will find that there are no surprises there, either.