OneWay e TwoWay DataBinding no Blazor

Já exploramos os recursos mais básicos de DataBinding no Blazor, de forma muito prática aqui nesse artigo. Agora, vamos esclarecer dois conceitos de DataBinding que já foram usados, mas não foram devidamente explicados.

OneWay

O OneWay é o tipo de DataBinding que só funciona em uma direção. Do código C# (@functions) para o HTML.

Esse tipo é amplamente usado para apresentar informações na interface, sem deixar com que o usuário altere esses valores. Veja um exemplo do OneWay na Figura 1.

Figura 1: OneWay DataBinding

Se você executar esse componente, verá que a mensagem Hello será apresentada no HTML, através da propriedade Message (Figura 2).

Figura 2: Testando OneWay DataBinding

TwoWay

Mas veja que no caso demonstrado na Figura 2, a propriedade Message nunca será modificada pelo HTML.

Para que um elemento HTML consiga modificar uma propriedade declarada na seção @functions, é preciso fazer um TwoWay DataBinding.

Para viabilizar o TwoWay, precisamos utilizar um elemento input no HTML, que permite ao usuário digitar valores. Veja um exemplo na Figura 3.

Figura 3: Two Way DataBinding

Observe que nesse exemplo ocorrem dois DataBindings com a propriedade Message. Um é o OneWay DataBinding, feito com o texto que será apresentado dentro do elemento <p></p>.

E o outro DataBinding é do tipo TwoWay, feito através do atributo bind no input HTML. Esse segundo DataBinding vai permitir que a propriedade Message seja atualizada pelo input HTML.

E toda vez que a propriedade Message for atualizada pelo input, o OneWay será disparado, atualizando o texto dentro do parágrafo HTML. Veja o resultado na Figura 4.

Figura 4: Testando TwoWay DataBinding

Conclusão

Esses conceitos parecem não ter tanta importância, mas são essenciais para podermos explorar recursos mais avançados de DataBinding no Blazor. Faremos isso em futuros artigos aqui nesse Blog.

Grande Abraço e até o próximo!

Publicidade