In our previous learn materials you’ve seen the dot notation in
The dot notation is similar to the dot notation in JavaScript, it’s used to access the properties of an object.
When the set-state
, set-attr
, or send-event
action tags are invoked in Realm, the behavior of the assigned value can be either static or dynamic, if there’s from
attribute in the tag, then the dot notation in value
attribute will accessing the
In the following example, it’ll accessing the data from an event
object.
<custom-element name="see-what-im-typing">
<element-state name="data" type="string">Default Value</element-state>
<element-flow>
<trigger-event input="Input">
<set-state name="data" value="$.target.value" from="event"></set-state>
</trigger-event>
</element-flow>
<template>
<input ref="Input" _value="#data" />
<slot name="#data"></slot>
</template>
</custom-element>
<see-what-im-typing></see-what-im-typing>
In Realm, the dot notation can also be used to access repeatable items within the <repeat-list>
tag. This special feature allows you to use the $.
notation to access the individual items being iterated over.
In the previous <repeat-list>
tag. You can use it to bind data to child element attributes, apply conditional logic, or perform other operations on each item.