StimulusJS: values/classes
O curso mostra como controllers Stimulus leem configuração de atributos data com static values e static classes, a partir dos controllers de uma aplicação. Ele explica por que values tipados substituem as strings cruas do dataset, as formas abreviada e completa de declaração e o padrão embutido de cada tipo. Também percorre as regras de coerção da stimulus-rails 1.3.4, os acessores que leem e escrevem o atributo do DOM na hora e os callbacks xxxValueChanged. No fim, apresenta o static classes, que mantém nomes de classes CSS no HTML.
O que você vai aprender
- ✓Declarar values com o atalho ou com o objeto completo de tipo e padrão
- ✓Os valores de reserva embutidos de cada tipo e quando escrever um padrão explícito
- ✓As regras de coerção para values Boolean, Number, String, Array e Object
- ✓Ler e escrever this.xxxValue e o que o hasXxxValue informa
- ✓Usar callbacks xxxValueChanged como etapa de desenho, com checagens
- ✓Declarar static classes para manter nomes de classes CSS no template
Por que values existem: lendo configuração do DOM
O elemento de um controller Stimulus pode carregar configuração em atributos data-* comuns antes de o static values entrar em cena. this.element.dataset.dismissAfter lê uma string, sempre uma string, sem nome declarado para conferir erros de digitação e sem tipo para onde convertê-la. O controller…
Ler a aula completa grátis →Currículo
7 aulasPor que values existem: lendo configuração do DOM
Por que o static values existe: o dataset sempre devolve strings, e um value Number chega já convertido.
Declarando values: forma abreviada vs. forma completa de objeto
O atalho com só o tipo contra o objeto completo com tipo e padrão, com os cinco tipos em uso.
Defaults: valores explícitos vs. o fallback embutido de cada tipo
O valor de reserva de cada tipo, quando escrever um padrão explícito e a diferença entre atributo ausente e vazio.
Coerção de tipo: as regras exatas que o Stimulus aplica
As funções leitoras da stimulus-rails 1.3.4, incluindo a regra do Boolean em que só "0" e "false" viram falso.
Lendo e escrevendo values: this.xxxValue como um acessor vivo
Como o this.xxxValue lê e escreve o atributo do DOM na hora, e por que o hasXxxValue fica sempre true com padrão.
Callbacks xxxValueChanged: o value é o estado, o callback é a renderização
Como os callbacks xxxValueChanged disparam a cada mudança e uma vez antes do connect(), e como os controllers os protegem.
static classes, e juntando tudo
Como o static classes transforma nomes de classes separados por espaço em arrays, no exemplo do modal de confirmação.