Neste primeiro tutorial, falaremos de alguns conceitos básicos da construção de uma interface web com o padrão Model-View-ViewModel (MVVM) usando o knockout.js.
Veremos como definir a interface do UI do usuário usando visualizações e ligações declarativas, seus dados e comportamento usando modelos de visualização e observadores, e como tudo permanece sincronizado automaticamente graças ao rastreamento de dependências do Knockout (mesmo com cadeias de dados em cascata arbitrárias).
Usando Bindings na View
O uso dos atributos data-bind, ligação de dados, são como o Knockout permite associar declarativamente propriedades do modelo de exibição a elementos DOM. Abaixo veremos um exemplo de uso:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Iniciando Knockout JS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
</head>
<body>
Meu primeiro exemplo com <b><span data-bind="text: knockout"></span></b> onde informei o meu
<u><span data-bind="text: name"></span></u> e a minha idade <span data-bind="text: age"></span>
<script>
var viewModel = {
knockout: "Knockout JS",
name: "Meu nome aqui",
age: "Minha idade aqui"
};
ko.applyBindings(viewModel);
</script>
</body>
</html>
Primeiro fazemos a chamada da lib Knockout no head da nossa página:
<head>
<meta charset="UTF-8">
<title>Iniciando Knockout JS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
</head>
Após, adicionamos os nossos atributos data-bind dentro do span para associarmos declarativamente as propriedades da nossa model a elementos do DOM.
<u><span data-bind="text: name"></span></u> e a minha idade <span data-bind="text: age"></span>
Criando a nossa view-model com o KO:
var viewModel = {
knockout: "Knockout JS",
name: "Meu nome aqui",
age: "Minha idade aqui"
};
Finalmente, fazemos a ativação do Knockout através da declaração:
ko.applyBindings(viewModel);
Salve as suas modificações e teste no seu navegador.
Viu como a utilização do Knockout é simples?
Dúvidas? Posta aí!!!
Aquele abraço!