Helper lifecycle hooks and events

Helper lifecycle hooks and events

Run code at key points in a Helper’s lifecycle using the beforeReady and ready render hooks.

Run logic before a helper is rendered

Define a beforeReady function to run code when a helper instance is initialized and mounted to the HTML:

Fliplet.Helper({
  name: 'profile',
  data: {
    firstName: 'John'
  },
  render: {
    beforeReady: function () {
      // Helper has been rendered
    }
  }
});

Run logic once a helper is rendered

Define a ready function to run code when a helper instance is initialized and mounted to the HTML:

Fliplet.Helper({
  name: 'profile',
  data: {
    firstName: 'John'
  },
  render: {
    ready: function () {
      // Helper has been rendered
    }
  }
});

Note:the ready does not get fired when you are editing your app in Fliplet Studio. Please use "Preview" mode to test your code.


Run logic once all helpers have been rendered

Define a afterHelpersRender hook to run code when all helpers have been initialized and rendered:

Fliplet.Hooks.on('afterHelpersRender', function () {
  // All helpers have been rendered
});

Further reading

Next article in this series

Dynamic components

Learn how to add support for dynamic components to your helper.

Views

Learn more about how to add rich-content views to your helper.