Sandbox: JavaScript

A generic handler for invoking element methods on any element.

Use the Delegator When Possible

The Invoke Behavior has a sister implementation in Delegator.Invoke (see docs / examples) that is the prefered implementation to use.

When should you use this behavior?

Use this behavior filter when you have a bunch of items that have links that you want to use to invoke an element method. Imagine a table of things or a form with tons of inputs. This behavior lets you declare desired behavior on the top level element (the table, the form) and monitor child elements for events (clicking a row, changing an input) and then invoke an element method on an element relative to the parent (the table, the form) or the target (the row, the input).

This is rather specialized, which is why the delegator is the preferred usage.

Examples

The example below shows two uses of this filter. First, on the top level element, you can see how the pattern works when you use a parent element to watch for events on child elements. This allows a form to watch for changes on all its inputs, for example.

But the other use is a specific element that, when interacted with, invokes the desired method. I.e. click this button and change that element over there. Here there's no delegation and the event target is the element with the filter.

<div data-behavior="Invoke"
  data-invoke-options="
    'events':[
      'change:relay(input)',
      'click:relay(.toRed)'
    ],
    'action':'addClass',
    'args':['red'],
    'targets':'input'
  ">
    <div class="form-group">
      <label for="one">This turns red when you change it</label>
      <input id="one" type="text" class="form-control"/>
    </div>
    <button type="submit" class="btn btn-default toRed">Clicking me also turns the input red</button>
    <button type="submit" class="btn btn-default" data-behavior="Invoke"
      data-invoke-options="
        'action': 'removeClass',
        'args': ['red'],
        'targets': '!div input'
      "
    >Clicking me also turns the input white again</button>
 </div>

Behavior Options

These options apply only to the data- tag invocation.

Name type default description
events array ['click'] A list of events to monitor on the element with the filter. Can specify delegated events (e.g. ['click:relay(input)']) and, as an array, can specify numeroud such events. The default setting makes the filter monitor the elmeent with the filter for clicks.

If you're not using a relayed event ('click:relay(.foo)'] then you should probably be using Delegator.Invoke

action string ~ What method to invoke. This can be any element method. This includes all the MooTools Element methods and, for that matter, any element shortcuts (such as Fx.Tween's .tween method) including methods you add to the Element prototype yourself.
args array ~ The arguments passed to the method. If you don't want to pass any arguments, you still need to specify an (empty) array.
targets string ~ The selector to find elements to invoke the method on. This is required unless you pass in an option for targetsFromEventTarget.
targetsFromEventTarget string ~ Same as the targets option except that this runs the selector against the element that triggered the event (i.e. the button you clicked on, not the element with the filter). This is useful if you wish to have a button for each row in a table that does something to its own row, for example. You could add a filter to each item and have it search for its row, but this option lets you add the behavior to the container only once and do the search at event time.