DataComputed JS

Use the DataComputed component to create a one-way binding of a property of the targeted DOM element with a computed value. This component extends the DataBind component, so it inherits from its API.

Table of content

• Examples
• JavaScript API

Usage

Basic usage to transform a value

Use the DataComputed component alongside the DataModel component to create a two-way binding with a computed value.

index.html

<!-- Two ways binding on the "text" group for the input's value -->
<input type="text" data-component="DataModel" data-option-group="text" />

<!-- Update the text content with the input's value in UPPERCASE -->
<div
  data-component="DataComputed"
  data-option-group="text"
  data-option-compute="value.toUpperCase()">
  ...
</div>

app.js

import { registerComponent } from '@studiometa/js-toolkit';
import { DataModel, DataComputed } from '@studiometa/ui';

registerComponent(DataModel);
registerComponent(DataComputed);

Double computed value