Domma Reactive 1.3: array helpers in your bindings

Domma Reactive 1.3.0 adds thirteen built-in array helpers to binding expressions, with observable item reads tracked so counts, filters and totals update as the data changes.

By Darryl Waterhouse · · 1 min read

A list in a reactive interface usually needs more than showing every row. You may want to count the completed tasks, find the first match, total a set of values or show a comma-separated summary. Until now, that meant writing a computed value for each screen. Domma Reactive 1.3.0 puts those everyday operations directly in binding expressions.

Helpers ready to use

The release adds thirteen built-in helpers: len, includes, some, every, count, where, sum, pluck, sortBy, first, last and join. For example, a template can show len(todos), test some(todos, 'done'), or total a numeric field with sum(lines, 'amount') - with no helper registration or per-view computed required.

where and sortBy return fresh arrays, so they can drive a keyed list directly:

<div data-each="where(todos, 'done', false) key=id">
  <span data-bind-text="title"></span>
</div>

Still reactive

These helpers accept an observableArray directly. They also read observable fields on the items themselves: count(todos, 'done') updates when a row's done value changes, without replacing the array. The reads are tracked, so the binding re-runs when the data it used changes.

Helpers you registered yourself continue to take priority when they share a built-in's name. That keeps existing applications in control of their expressions.

Try it

Upgrade with npm install domma-reactive@1.3.0. The Domma Reactive site has the feature demos and full documentation; the source and changelog are on GitHub.