Stimulus.js: actions & targets
O Stimulus prende pequenos comportamentos a HTML renderizado no servidor. O curso lê os controllers e as views de um app para explicar como essa ligação funciona. Ele mostra como o caminho do arquivo de um controller vira o identificador usado no data-controller. Trata de targets e dos acessores que eles geram. Explica actions, com a sintaxe explícita de evento e o atalho. Também cobre values tipados lidos de atributos data, incluindo um vindo de uma constante Ruby. As últimas aulas mostram dois controllers na mesma árvore de elementos e terminam com um pequeno desafio em Ruby puro.
O que você vai aprender
- ✓Como o caminho de um arquivo de controller vira o identificador do data-controller
- ✓Declarar targets e usar xTarget, hasXTarget e xTargets
- ✓Ligar eventos do DOM a métodos com data-action, na forma explícita ou no atalho
- ✓Ler values tipados de atributos data, incluindo constantes Ruby
- ✓Aninhar controllers independentes na mesma árvore de elementos
- ✓Por que métodos privados com # não podem ser ligados a uma action
O que um controller Stimulus conecta
Um dropdown que abre e fecha, um campo de senha com medidor de força, um diálogo que fecha quando você clica fora dele: nada disso precisa de um framework que renderize views no navegador. Cada um precisa de HTML comum, renderizado no servidor, com um pouco de comportamento preso a elementos…
Ler a aula completa grátis →Currículo
7 aulasO que um controller Stimulus conecta
Mostra os 30 controllers do app, como o eagerLoadControllersFrom os registra e o formato de classe comum a todos.
Nomeação: como um arquivo vira um identificador
Explica a regra fixa que transforma o caminho de um controller num identificador como auth--password-strength ou tabs.
Targets: nomeando um elemento dentro do controller
Trata de static targets, dos três acessores gerados e do uso de hasIconTarget para proteger um elemento opcional.
Actions: conectando um evento do DOM a um método
Compara a sintaxe explícita event->identificador#method com o atalho e mostra um método que recebe o evento do DOM.
Values: configuração tipada a partir de atributos data
Mostra static values convertendo texto de atributos em valores tipados, incluindo limites de senha vindos de uma constante Ruby.
Compondo dois controllers na mesma árvore de elementos
Aninha dois controllers de senha no formulário de cadastro e explica por que métodos privados com # não viram actions.
Juntando actions e targets
Recapitula a ligação do ui--dialog, mostra como o escopo do controller cobre uma subárvore e propõe um desafio em Ruby.