data-bind

Overview

data-bind is for complex data rebinding into framework-managed table elements. In the current TemplateManager implementation it is intended for:

• <table data-table="..."> handled by TableManager
• <table data-line-items="..."> handled by LineItemsManager

It is not a generic text-binding directive. For text, attributes, and loops, use data-text, data-attr, and data-for.

Why use it:

• ✅ Binds structured row data declaratively
• ✅ Supports expressions, dot paths, bracket access, and {{ }} interpolation
• ✅ Reactive when the bound expression changes
• ✅ Waits for managed table instances to finish initializing before applying data

Basic Usage

Bind Rows Into TableManager

<table data-table="leaveHistory"
       data-bind="historyRows">
  ...
</table>

{
  historyRows: [
    { id: 1, title: 'Approved', created_at: '2026-04-16 09:00' }
  ]
}

Bind Nested Data

<table data-table="orders"
       data-bind="response.tables.orders">
  ...
</table>

Bind Line Items

<table data-line-items="invoiceItems"
       data-bind="invoice.items">
  ...
</table>

What It Sends To Managers

For TableManager, data-bind accepts either:

• a plain rows array
• an object with data, meta, filters, options, or columns

For LineItemsManager, it expects an array of rows or an object whose data property is the array.

Reactive Behavior

data-bind is reactive. When the bound expression changes:

• the expression is re-evaluated
• any previous retry timer is cleared
• the target manager is updated again when ready

This matters for:

• tables populated after API/template rebinding
• line items inside forms that are rebound with new record data
• data-for or interpolated paths that resolve different datasets later

data-attr="data:..." Compatibility

data-attr can delegate data:fieldName bindings into data-bind internally:

<table data-table="orders"
       data-attr="data:response.orders">
  ...
</table>

This is supported for backward compatibility, but explicit data-bind is clearer in new templates.

Common Pitfalls

1. Using It Like data-text

<!-- ❌ Wrong use case -->
<span data-bind="user.name"></span>

Use data-text="user.name" instead.

2. Binding To a Non-managed Element

<!-- ❌ No TableManager / LineItemsManager target -->
<div data-bind="rows"></div>

data-bind only has effect on elements already managed as tables or line items.

3. Returning null or undefined

If the expression resolves to null or undefined, no data is applied.

Related Directives

• data-for - Render arrays directly in template HTML
• data-attr - Backward-compatible data:... delegation
• data-options-key - Bind related option collections