Sandbox: JavaScript

A generic handler for invoking element methods on any element and toggling based on state.

Delegator.Invoke

Examples

The example below shows how to change the text of an element invoking set('html', 'TEXT') after interacted with, toggling the element text. In general terms, after interacting with the element, it would toggle between the 'on' and 'off' methods specified.

Used for example with the delegator toggleClass when you want to hide/show element.

<div class="example">
      <a data-trigger="invoke.toggle"
        data-invoke-toggle-options="
          'target': 'self',
          'condition':{
            'method': 'get',
            'args': ['html'],
            'value': 'On State'
          },
          'on': {
            'method': 'set',
            'args': ['html', 'On State']
          },
          'off': {
            'method': 'set',
            'args': ['html', 'Off State']
          }
        "
      >Off State</a>
    </div>

Behavior Options

These options apply only to the data- tag invocation.

Name type default description
target string 'self' Selector to find the element to invoke the toggle on.
condition Object ~ An object with 'method', 'args' and 'value' to check if the element to toggle is in the specified state. It would call the method 'off' if the condition is true, and the method 'on' otherwise. otherwise
on Object ~ An object with 'method' and 'args' that will get called when toggling to the 'on' state.
off Object ~ An object with 'method' and 'args' that will get called when toggling to the 'off' state.