data-options-key

Overview

data-options-key populates option-based elements from context.options. It is intended for elements enhanced by the Now.js element factories such as selects, multi-selects, tags inputs, and text/autocomplete inputs.

When to use:

• Populate select or autocomplete options from API-loaded form state
• Reuse option collections returned by FormManager or template result binding
• Resolve option keys dynamically inside data-for

Why use it:

• ✅ Reads from context.options
• ✅ Reactive when options are rebound
• ✅ Supports plain keys, dot paths, bracket paths, and {{ }} interpolation
• ✅ Works with data-attr="value:..." or data-model for the selected value

Basic Usage

Simple Select

<select name="country"
        data-options-key="countries"
        data-attr="value:country">
  <option value="">Select country</option>
</select>

{
  country: 'TH',
  options: {
    countries: [
      { value: 'TH', text: 'Thailand' },
      { value: 'US', text: 'United States' }
    ]
  }
}

Dynamic Key Inside data-for

<div data-for="attribute in attributes">
  <template>
    <select data-options-key="attribute_options[{{attribute.id}}]"
            data-attr="value:attribute.selected">
      <option value="">Choose...</option>
    </select>
  </template>
</div>

Supported Lookup Forms

<select data-options-key="countries"></select>
<select data-options-key="catalog.countries"></select>
<select data-options-key="attribute_options[{{attribute.id}}]"></select>
<input data-element="tags" data-options-key="tag_sets.{{language}}">

The resolved key is always looked up from context.options.

Works Best With

data-attr="value:..."

Use data-attr when the selected value comes from one-way API data:

<select data-options-key="roles"
        data-attr="value:user.role_id">
  <option value="">Select role</option>
</select>

data-model

Use data-model when the selection should write back into state:

<select data-options-key="roles"
        data-model="form.role_id">
  <option value="">Select role</option>
</select>

Reactive Behavior

data-options-key is not one-shot. When TemplateManager rebinds the same block with new context.options, the element is repopulated again. Internally it caches the last resolved signature to avoid unnecessary repaints.

This makes it suitable for:

• form load + watched API updates
• modal forms rebound with different option sets
• data-for loops where each row resolves a different option key

Common Pitfalls

1. Using data-options-key Without context.options

<!-- ❌ No matching options source -->
<select data-options-key="countries"></select>

Return option collections under options from the parent binding context.

2. Expecting It To Set the Selected Value

data-options-key fills the available options. It does not choose the selected value by itself.

Use one of these as well:

• data-attr="value:..."
• data-model="..."

3. Returning the Wrong Shape

Expected option items are typically shaped like:

[{"value":"TH","text":"Thailand"}]

Related Directives

• data-attr - One-way value binding
• data-model - Two-way selection binding
• data-for - Dynamic option-key resolution per row