js directory for your element. You need to create a file named
element.js, which will be used for both the editor and the published site.
Editor vs. Published Scripts
editor_element.js file to be used only within the editor. This allows you to specify different events and interactions for the site owner when working with your element in the editor. This may be necessary when your element requires major interactivity with the user on a published site, as the element placeholder in the editor can handle only basic interaction, such as direct editing.
You extend our Backbone View named
PlatformElement.js to initialize, render, handle events, and define other functionality for your element.
$) and Underscore (use
Extending the Base Class
To extend the base class, call the
extend method of
PlatformElement. With this method, all code must be contained within your extended class. You specify an
initialize method that gets called once your element is placed on the DOM and is ready for event bindings and interaction.
Self-executing anonymous function
If you use the self executing anonymous function, you can move code outside of the element definition, and you have a bit more flexibility in terms of where you place your code. You can use the example below as a starting point for your element.
this.settings, which acts as a Backbone Model, and the
get method. Any settings that are defined as private in your
savecall to fail resolving. You can catch this with the
.failchained method on your
Once you update settings, you need to re-render the page for the new values to be applied.
Rerender to Apply Changes
If your element updates its settings, you need to trigger a re-render before the new settings are properly applied to the element in the editor. We’ve overridden the
render to trigger a rerender. Once the rerender is complete, your element is in a fresh new state, and your
initialize method is rerun.
rendermethod from within your
initializemethod will cause an infinite loop. This is because the editor will destroy and regenerate the DOM nodes repeatedly. Be careful not to do this!
Include Additional Data
assets_path: The HTTP accessible root path to your elements’ assets folder, in protocol-agnostic form. The path contains the trailing slash. It is accessible as a property of your element:
site_id: We also expose some identifying information about the current user, site, and element. The
element_idis the unique element ID for this element instance. The
site_idare the unique identifiers for the current user and site.
site_idwill be universally unique. We recommend that you use a composite key for any storage you may be doing on your servers or services!