Binding Attributes
Binding attributes allow the values in properties to be used or appear in different ways inside the component's HTML markup.
The following example uses the wr-text
attribute binding. It will display the message property passed into the component in a div
element. It is the equivalent to the same sample example that uses interpolation.
The following example uses an admin
property with the wr-hide
binding attribute to hide the div
element if the property evaluates to false
.
Class
Use the wr-add-class
attribute binding to add CSS classes to a component.
Events
The wr-on*
binding sets a callback for an element's native event.
The following example will call the myClick
method on the web component when the button in the template is clicked.
To add parameters to the event, use the WireBootstrap args formatter.
There are many more attribute bindings are available to use. For a list and examples of each or to learn how to create your own bindings, visit the Tinybind bindings page.
Custom
To create your own bindings, add a function to the tinybind.binders
object.
And then use the bindings in a template.
Objects
In the examples above, primitive static values are passed into the component using it's attributes. Binding attributes also allow complex objects to be passed from one component to another.
Visit Objects for details.
Last updated