Enlaces de entrada

Es muy común que sea necesario poder leer el valor de un input html (o textarea, o select) para poder usarlo (nota: ¡no necesita estar en un formulario!). Una forma posible de hacer esto es hacerlo a mano:

class Form extends owl.Component {
  state = useState({ text: "" });

  _updateInputValue(event) {
    this.state.text = event.target.value;
  }
}

<div>
  <input t-on-input="_updateInputValue" />
  <span t-esc="state.text" />
</div>

Esto funciona. Sin embargo, requiere un poco de código de plomería. Además, el código de plomería es ligeramente diferente si necesita interactuar con una casilla de verificación, con botones de opción o con etiquetas de selección.

Para ayudar con esta situación, Owl tiene una directiva incorporada t-model: su valor debe ser un valor observado en el componente (normalmente state.someValue). Con la directiva t-model, podemos escribir un código más corto, equivalente al ejemplo anterior:

class Form extends owl.Component {
  state = { text: "" };
}

<div>
  <input t-model="state.text" />
  <span t-esc="state.text" />
</div>

La directiva t-model funciona con <input>, <input type="checkbox">, <input type="radio">, <textarea> y <select>:

<div>
    <div>Text in an input: <input t-model="state.someVal"/></div>
    <div>Textarea: <textarea t-model="state.otherVal"/></div>
    <div>Boolean value: <input type="checkbox" t-model="state.someFlag"/></div>
    <div>Selection:
        <select t-model="state.color">
            <option value="">Select a color</option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
        </select>
    </div>
    <div>
        Selection with radio buttons:
        <span>
            <input type="radio" name="color" id="red" value="red" t-model="state.color"/>
            <label for="red">Red</label>
        </span>
        <span>
            <input type="radio" name="color" id="blue" value="blue" t-model="state.color" />
            <label for="blue">Blue</label>
        </span>
    </div>
</div>

Al igual que el manejo de eventos, la directiva t-model acepta los siguientes modificadores:

Modificador	Descripción
.lazy	Actualizar el valor en el evento cambio (el valor predeterminado es en el evento entrada)
.number	Intente analizar el valor en un número (usando parseFloat)
.trim	recortar el valor resultante

Por ejemplo:

<input t-model.lazy="state.someVal" />

Estos modificadores se pueden combinar. Por ejemplo, t-model.lazy.number solo actualizará un número cuando se realice el cambio.

nota: el patio de juegos en línea tiene un ejemplo para mostrar como funciona.