This content originally appeared on DEV Community and was authored by Lucas Teixeira dos Santos Santana
Este conteúdo é basicamente uma tradução dos materiais originais. A intenção é adquirir aprendizado sobre o KnockoutJs para Magento 2 e criar conteúdo em português sobre KnockouJs.
Documentação
Padrão MVVM
A arquitetura MVVM (Model-View-ViewModel) é um padrão de design de software amplamente utilizado em aplicações de interface de usuário. O MVVM é particularmente útil em aplicações com interfaces de usuário complexas e interativas, pois separa claramente a lógica de negócio do comportamento da interface. Isso facilita a manutenção, testabilidade e escalabilidade do código.
Quando o usuário interage com a View, o ViewModel captura essas ações e atualiza os dados correspondentes no Model. Quando o Model é atualizado, o ViewModel recebe essas alterações e atualiza automaticamente a View, refletindo as mudanças na interface do usuário. O ViewModel também pode realizar ações específicas, como enviar requisições ao servidor para buscar ou enviar dados.
Model (Modelo): O Model representa a camada de dados da aplicação. Ele lida com a lógica de negócio, regras de validação, armazenamento e recuperação de dados. O Model geralmente consiste em objetos de dados que representam as entidades e funcionalidades específicas do domínio da aplicação.
View (Visualização): A View é a camada de apresentação da aplicação, responsável por exibir os dados do Model e interagir com o usuário. Ela representa a interface gráfica com a qual o usuário interage para visualizar e manipular os dados. Na arquitetura MVVM, a View é mantida o mais desacoplada possível da lógica de negócio, tornando-a fácil de ser atualizada e substituída.
ViewModel: O ViewModel é a parte central do padrão MVVM. Ele atua como um intermediário entre a View e o Model, realizando a comunicação e a ligação de dados bidirecional entre eles. O ViewModel contém a lógica de apresentação, transformando os dados do Model em uma forma adequada para exibição na View. Além disso, o ViewModel gerencia eventos e respostas do usuário, interagindo com o Model conforme necessário.
KnockoutJs
O Knockout.js é uma biblioteca JavaScript de código aberto que permite a criação de interfaces de usuário dinâmicas e reativas. Ele é especialmente útil para desenvolver aplicações web com interface de usuário complexa e interativa. O KnockoutJs é baseado no padrão de design MVVM (Model-View-ViewModel), que separa a lógica de negócios (Model) da apresentação (View) através de uma camada intermediária chamada ViewModel. É independente de qualquer outra estrutura.
O KnockoutJs foi desenvolvido e é mantido como um projeto de código aberto por Steve Sanderson, um funcionário da Microsoft em 5 de julho de 2010.
KnockoutJs suporta todos os navegadores convencionais - IE 6+, Firefox 3.5+, Chrome, Opera, Safari (desktop/mobile). O atributo data-bind não é nativo do HTML, embora seja um atributo aceitável (é estritamente compatível com o HTML 5 e não causa problemas com o HTML 4, embora um validador indique que é um atributo não reconhecido). Mas como o navegador não sabe o que isso significa, é necessário ativar o KnockoutJs para fazer efeito.
Ao usar KnockoutJs, sua camada de view é simplesmente seu documento HTML com ligações declarativas para vinculá-lo a camada de view-model. Como alternativa, é possível utilizar models que geram HTML usando dados de um modelo da camada de view-model.
Basta colocar o bloco de script na parte inferior de um documento HTML ou colocá-lo na parte superior e agrupar o conteúdo em um manipulador pronto para DOM, como a função $ do jQuery.
ko.applyBindings(myViewModel): é um método usado para aplicar o data binding no KnockoutJs e vincular um ViewModel (ou Model) à interface do usuário (View). Ele conecta o ViewModel aos elementos HTML no DOM, permitindo que os dados do ViewModel sejam refletidos automaticamente na interface do usuário e vice-versa. Ao chamar este método, o KnockoutJs percorre o DOM em busca de elementos que possuam as diretivas de data binding do KnockoutJs e cria as ligações entre esses elementos e as propriedades do ViewModel especificadas nas diretivas.
Opcionalmente, é possível passar um segundo parâmetro para definir em qual parte do documento é desejado pesquisar atributos de vinculação de dados. Por exemplo, ko.applyBindings(myViewModel, document.getElementById('someElementId')). Isso restringe a ativação ao elemento com ID someElementId e seus descendentes, o que é útil caso seja desejável ter vários modelos de exibição e associar cada um a uma região diferente da página.
Instalação
Basta referenciar o arquivo JavaScript usando uma tag <script> em algum lugar de suas páginas HTML.
<script type='text/javascript' src='knockout-3.5.1.js'></script>
Obviamente é necessário atualizar o atributo src para corresponder ao local foi colocado o arquivo baixado.
CDN
Para oferecer as velocidades de download mais rápidas, é preferirível referenciar KnockoutJs em um dos seguintes CDNs de terceiros no site oficial do KnockoutJs da guia de instalação.
This content originally appeared on DEV Community and was authored by Lucas Teixeira dos Santos Santana
Lucas Teixeira dos Santos Santana | Sciencx (2024-10-21T14:17:13+00:00) Introdução ao KnockoutJs. Retrieved from https://www.scien.cx/2024/10/21/introducao-ao-knockoutjs/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.