Binding Attribute Values

The g-bind directive, also known as the shorthand : syntax, is a fundamental directive in Graphane that enables you to bind values or expressions to SVG attributes, styles and classes in your templates. This directive must include the name of the attribute to which you want to assign a value, for example, g-bind:r="expression" or simply :r="expression".

Attributes

The g-bind directive allows you to dynamically associate data to the SVG attributes. This enables you to update the values and update the attributes automatically.

Here is an example of using the g-bind directive to bind the r attribute of a circle element to a dynamic value:

In this case, size refers to a data property that holds the radius value. The g-bind directive binds the r attribute of the circle element to that value. When size changes in the Graphane component, the radius attribute will be automatically updated.

If you need to query the current value of an attribute in the expression that has the g-bind directive, you can use the $$.curentVale() helper to get the value before executing the expression.

Style

When using g-bind with the style attribute, you can dynamically bind an object containing CSS styles to an element. The keys of the object represent the CSS properties, and the values represent the corresponding values for those properties.

The behavior of g-bind with the style attribute is additive, that is, it adds the new values to the existing style.

Class

Similarly, g-bind, or the shorthand :, can be used with the class attribute to dynamically bind CSS classes to an element based on the values in the <g-composer> component data. You can bind a single class, an array of classes, an object with classes an values true for add or false for remove, and a mix of array and objects.

With strings or an array with strings, the behavior of g-bind with the class attribute is additive, that is, it adds the new values to the existing classes and does not replace them.

Using an object with class names as keys and boolean values as conditions allows adding or removing classes dynamically.

• true means the class is added.
• false means the class is not added (and if previously present, it is effectively removed).