Dynamic attributes are attributes that gets re-evaluated whenever a variable it uses has been updated.

Dynamic attributes are being managed by lib/entity/attributes.js.

Note: State updates inside dynamic attributes does not cause re-renders to avoid infinite loops.

Last updated at Feb 29, 2024 by Joeylene

TABLE OF CONTENTS

A native attribute can become a dynamic attribute by appending a :, changing attribute to :attribute. Example is style to :style. Supported attributes are the native ones, aria-, and data- attributes.

Note that dynamic attributes are evaluated as JavaScript, so you have to update the content of the attribute. Turning style=" color: red; " to style=" 'color: red' " for it to become valid JavaScript:

<!-- Native attribute -->
<input style=" color: red; " />

<!-- Turning it into a dynamic attribute, to make it a valid JS code -->
<input style=" 'color: red' " />

However, if you are not using any variables, we don’t suggest making them “dynamic”.

A suggested use case of dynamic attributes is when you want an attribute to be based on certain variables:

<script>
  firstName = 'Arya'
  lastName = 'Rose'
</script>

<input :change="firstName = this.value" />
<input :change="lastName = this.value" />

<p :text=" `Hello ${firstName} ${lastName}, nice to meet you!` "></p>

Custom Attributes

Mini has three custom attributes for data-syncing.

• :class - Set the class of a DOM element to the result of the evaluated JS code.
• :text - Set the text content of a DOM element to the result of the evaluated JS code.
• :value - Set the value of a form input to the result of the evaluated JS code.

<script type="text/javascript">
  firstName = 'Tony'
</script>

<input type="text" :change="firstName = this.value" />

<!-- The innerText of this paragraph changes based on the firstName variable -->
<p :text="firstName"></p>

The other attributes are:

• :parent - Makes the current entity a “parent”, enabling usage of parent. variable to its children.
• :each - used to loop through an array and render a template for each item.
• :each.item - Used internally by Mini to detect whether its :each item’s data attributes has been used as variables by its children.

Entity Initialization

Each entity is initialized with attributes: