Binding Fields to DOM

On the previous page, we saw the most generic way fields relate to the DOM: a component owns fields, and those fields are reflected in the DOM so that state remains visible and inspectable.

In its simplest form, a field may exist only as component state, or be defined via data-* attributes on the component's root element and that's often enough. However, many components need something more specific:

• A field rendered as visible text inside the component.
• A field stored in an attribute of a particular element.
• A field mapped to a native HTML attribute such as title or value

Qite supports these patterns explicitly and in a structured way. This page explains the two supported mechanisms.

Binding fields to element.textContent

Sometimes a field represents text that should appear inside the component. For example, a label, a hint, a counter, or an error message. Instead of manually updating textContent, you can bind the field to an element using data-field :

<div data-component="TextInput">
    <label data-field="label"></label>
</div>

When the component sets:

this.fields.set("label", "Delivery address, 123");

the <label> element's textContent updates automatically.

Binding fields to attributes with data-field-map

Sometimes a field should not be rendered as visible text, but stored in an attribute of a specific element. For this, Qite uses data-field-map

The explicit syntax is:

field_name:attribute_name

For example:

<div data-component="Profile">
    <input data-field-map="tooltip:title" title=""/>
</div>

Here, the field tooltip is read from and written to the native title attribute. When you call:

this.fields.set("tooltip", "Click to edit");

Qite updates the title attribute of the <input> element. Or, if you omit the attribute name:

<input data-field-map="placeholder" data-placeholder="">

the mapping defaults to placeholder:data-placeholder. Note how underscores in the field name become dashes when mapped to HTML attribute names.

Choosing the right mechanism

Use:

• data-field when the field represents visible text.
• data-field-map when the field must live in an attribute.

Both mechanisms are declarative and in both cases — you set the field on the component, and Qite ensures the DOM stays in sync.