Methods

Methods

Both configuration interface and configuration fields have available the following methods to fetch details regarding children helpers nested into the current helper:

  • find
  • findOne
  • children

Interface

Considering the following HTML template:

<fl-helper name="quiz">
  <fl-helper name="results"></fl-helper>
</fl-helper>

The following methods allow you to get the results helper instance via the quiz helper instance.

Find all nested helpers

Use the find method to retrieve a list of all helpers nested in the current helper.

Fliplet.Helper({
  name: 'quiz',
  configuration: {
    fields: [
      {
        name: 'sample',
        type: 'html',
        html: '<input type="text" />',
        ready: function(el) {
          // Get a list of nested helpers by name
          var foundHelpers = this.find({ name: 'results' });

          // You can also use the shorthand
          var foundHelpers = this.find('results');

          // You can also provide a predicate function
          var foundHelpers = this.find(function (instance) {
            return instance.name === 'results' || instance.name === 'bar';
          });
        }
      }
    ]
  }
});

Find a nested helper

Use the findOne method to retrieve a helper nested in the current helper.

Fliplet.Helper({
  name: 'quiz',
  configuration: {
    fields: [
      {
        name: 'sample',
        type: 'html',
        html: '<input type="text" />',
        ready: function(el) {
          // Get a nested helper by name
          var helperInstance = this.findOne({ name: 'results' });

          // You can also use the shorthand
          var helperInstance = this.findOne('results');

          // You can also provide a predicate function
          var helperInstance = this.findOne(function (instance) {
            return instance.name === 'results' || instance.name === 'bar';
          });
        }
      }
    ]
  }
});

Find all children helpers

Use the children method to retrieve a list of all direct child helpers nested in the current helper.

Fliplet.Helper({
  name: 'quiz',
  configuration: {
    fields: [
      {
        name: 'sample',
        type: 'html',
        html: '<input type="text" />',
        ready: function(el) {
          // Get a list of direct child helpers by name
          var foundHelpers = this.children({ name: 'results' });

          // You can also use the shorthand
          var foundHelpers = this.children('results');

          // You can also provide a predicate function
          var foundHelpers = this.children(function (instance) {
            return instance.name === 'results' || instance.name === 'bar';
          });
        }
      }
    ]
  }
});

Further reading

Next up

Hooks & events

Learn the hooks and events available to fields.
Recommended reading

External libraries

Learn how configuration UIs can use external libraries.