Bindings

Sometimes we need to get the value of a property or attribute from a DOM element and save it in a variable.

To do this, we can simply declaratively bind a compVar to an attribute or property of the element using the < symbol:

import { _ } from "bemtv";

const { onMount, $, template, render } = _`App`({
  divEl: undefined,
});

onMount(() => {
  console.log($.divEl)
});

template`div[ $divEl<this ]`;

render();

Note the $divEl<this, we are ordering Bemtv to set the DOM element as the value of the divEl property.

If we wanted an element instance as in useElManager() we could do:

import { _ } from "bemtv";

const { onMount, $, template, render } = _`App`({
  divEl: undefined,
});

onMount(() => {
  console.log($.divEl)
});

template`div[ $divEl<inst ]`;

render();

Numeric inputs

To get the current value of inputs we can use the value property and if we want this value to be converted to number automatically we must define the initial value of the property that will keep the value as a number:

import { _ } from "bemtv";

const {$, template, render } = _`App`({
  inputValue: 0,
});

template`input[ $inputValue<value type="number"]`;

render();

Select element

Binding with the select element is similar to inputs, however, if you use themultiple attribute you must define an array for the property that will bind with the select value:

import { _ }from "bemtv";

const { onMount, $, template, render } = _`App`({
  options: [],
});

template`
    select[
        $options<value

        multiple="true" ~

        option[value="1" ~ First]
        option[value="2" ~ Second]
        option[value="3" ~ Third]]`;

render();

Checkbox inputs

Similar to select, checkbox inputs can define an array for the property that will be bound to the list of checked items:

import { _ }from "bemtv";

const { $, template, render } = _`App`({
  options: [],
});

template`
      input[ $inputs<checked type="checkbox" name='test' value="1"]
      input[ type="checkbox" name='test' value="2"]
      input[ type="checkbox" name='test' value="3"]`;

render();