Knockout.js é uma biblioteca JavaScript que facilita a criação de aplicações single-page com data-binding e MVVM. Permite sincronizar modelos de dados com views dinâmicas através de observables e templates.
Boas práticas de programação com Object Calisthenics
Knockout JS - Uma framework para aplicações web
1.
2. Criado por Steve Sanderson (Microsoft)
. Objectivo
Desenvolver uma biblioteca que permitisse criar
aplicações que respondam rapidamente e com um
modelo de dados bem estruturado
6. Model
Camada de negócio, dados em formato json
View Model
Adapta informação proveniente do model de forma a
ser implementada facilmente na view
View (HTML puro)
<span data-bind="text: nome"></span>
9. Computed Observables
São funções que dependem de um ou mais observables
e que se actualizam automaticamente sempre que as
suas dependências tiverem alterações
this.nomeCompleto = ko.computed(function() {
return this.nome + ' ' + this.apelido
}, this);
o segundo argumento da função (this) permite passar a palavra
reservada this sem alterar seu escopo dentro da função
10. Templating
. Native templating
- Utilizando Control Flow Bindings
. String-based templating
- Permite integração com frameworks de templating
(ex: underscore.js, jquery.tmpl, mustache.js,
handlebars.js)
11. Control Flow Bindings
Capturam o HTML contido no elemento e utilizam-no
para renderizar informação.
. foreach
. if
. ifnot
. with
12. Control Flow Bindings
Exemplo
<ul data-bind="foreach: user">
<li data-bind="text: username">
</ul>
O elemento <ul> será populado com elementos <li> de
acordo com o número de utilizadores existentes.
13. String Based Templating
Exemplo com integração de control flow binding
<ul data-bind="template: {name: 'user-list-tmpl',
foreach: users}">
</ul>
<script type="text/html" id="user-list-tmpl">
<li data-bind="text: nome"></li>
</script>