Criado por Steve Sanderson (Microsoft). ObjectivoDesenvolver uma biblioteca que permitisse criaraplicações que respondam r...
Caracteristicas. Sincronização de dados. MVVM Development pattern. Suporta outras bibliotecas. Suportado por todos os brow...
Conceitos base. MVVM (Model, View, View Model). Data Binding (ligação de dados). Observables. Computed Observables. Templa...
Fluxo MVVM                    View                    Model             Viewutilizador          Model
ModelCamada de negócio, dados em formato jsonView ModelAdapta informação proveniente do model de forma aser implementada f...
Data Binding<span data-bind="text: nome"></span>O atributo data-bind permite à view e aoViewModel manterem-se sincronizados.
Observablesthis.nome = ko.observable(variável)Observa alterações nas propriedades,permitindo actualização das mesmas emtem...
Computed ObservablesSão funções que dependem de um ou mais observablese que se actualizam automaticamente sempre que assua...
Templating. Native templating- Utilizando Control Flow Bindings. String-based templating- Permite integração com framework...
Control Flow BindingsCapturam o HTML contido no elemento e utilizam-nopara renderizar informação.  . foreach  . if  . ifno...
Control Flow BindingsExemplo<ul data-bind="foreach: user">  <li data-bind="text: username"></ul>O elemento <ul> será popul...
String Based TemplatingExemplo com integração de control flow binding<ul data-bind="template: {name: user-list-tmpl,foreac...
Lifesavers. knockoutjs.com. knockmeout.net. stackoverflow.com/questions/tagged/knockout.js.https://groups.google.com/forum...
Útilhttp://channel9.msdn.com/Events/MIX/MIX11/FRM08
ThanksMário Andradefrontendweekly.net   @MarioRAndradeFront-end developer @ Codistage.pt
Knockout JS - Uma framework para aplicações web
Upcoming SlideShare
Loading in …5
×

Knockout JS - Uma framework para aplicações web

3,102 views

Published on

Knockout JS é uma framework de JavaScript que permite a ligação de dados com resposta imediata ao utilizador.

Published in: Technology

Knockout JS - Uma framework para aplicações web

  1. 1. Criado por Steve Sanderson (Microsoft). ObjectivoDesenvolver uma biblioteca que permitisse criaraplicações que respondam rapidamente e com ummodelo de dados bem estruturado
  2. 2. Caracteristicas. Sincronização de dados. MVVM Development pattern. Suporta outras bibliotecas. Suportado por todos os browsers
  3. 3. Conceitos base. MVVM (Model, View, View Model). Data Binding (ligação de dados). Observables. Computed Observables. Templating
  4. 4. Fluxo MVVM View Model Viewutilizador Model
  5. 5. ModelCamada de negócio, dados em formato jsonView ModelAdapta informação proveniente do model de forma aser implementada facilmente na viewView (HTML puro)<span data-bind="text: nome"></span>
  6. 6. Data Binding<span data-bind="text: nome"></span>O atributo data-bind permite à view e aoViewModel manterem-se sincronizados.
  7. 7. Observablesthis.nome = ko.observable(variável)Observa alterações nas propriedades,permitindo actualização das mesmas emtempo real sempre que houver alterações
  8. 8. Computed ObservablesSão funções que dependem de um ou mais observablese que se actualizam automaticamente sempre que assuas dependências tiverem alteraçõesthis.nomeCompleto = ko.computed(function() { return this.nome + + this.apelido }, this);o segundo argumento da função (this) permite passar a palavrareservada this sem alterar seu escopo dentro da função
  9. 9. 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)
  10. 10. Control Flow BindingsCapturam o HTML contido no elemento e utilizam-nopara renderizar informação. . foreach . if . ifnot . with
  11. 11. Control Flow BindingsExemplo<ul data-bind="foreach: user"> <li data-bind="text: username"></ul>O elemento <ul> será populado com elementos <li> deacordo com o número de utilizadores existentes.
  12. 12. String Based TemplatingExemplo 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>
  13. 13. Lifesavers. knockoutjs.com. knockmeout.net. stackoverflow.com/questions/tagged/knockout.js.https://groups.google.com/forum/?fromgroups#!forum/knockoutjs
  14. 14. Útilhttp://channel9.msdn.com/Events/MIX/MIX11/FRM08
  15. 15. ThanksMário Andradefrontendweekly.net @MarioRAndradeFront-end developer @ Codistage.pt

×