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.
Top comments (0)