Skip to content

Controlling hydration

data-phosis-object-attributes

You can specify what attributes & properties are available to be hydrated in your object using this option. For example, take a look at this HTML from a object.

Example:

<h3><a href="#" data-phosis-object="Email Link" data-phosis-object-attributes="href,text">Click Here</a></h3>

This indicates to Phosis that when this object is used within a container, whoever is editing the page should be able to map or configure data for both the link’s href and its text. (Note again the default/placeholder content from the web developer allowing you to preview how the layout will actually look.)

Or, if the object is an image, you may only indicate the “src” attribute is configurable via data-phosis-object-attributes. This then ties into the next configuration option, Images.

You can of course specify custom data- attributes that you use in your Javascript. We do this a lot in websites we build in Phosis.

Friendly aliases

Phosis has the ability to give these attributes an alias to make things clearer for users when setting up data mapping.

To specify an alias, you write the text within square brackets [ ] like so:

<h3><a href="#" data-phosis-object="Email Link" data-phosis-object-attributes="href[Links to],text[Content]">Click Here</a></h3>

During databinding configuration, users will see the alias as the prompt, with the attribute name in smaller text.