Knockout Javascript Library

Introduction to Knockout API, Declarative Bindings, Automatic Bindings, Dependecy Tracking, Template, REST Integration and more ...

Transcript

1. Knockout  Javascript  Library     Batuhan  Düzgün     2014  
2. Giriş   •  Genellikle,  web  uygulamalarında  arayüz  ile  bu   arayüzün  ardında  yer  alan  veri  modelinin   etkileşimini  yönetmek  zorlu  ve  karmaşık  bir   işGr.    Örneğin,  web  ortamında  çalışan  bir   ekranda  alışveriş  sepeGne  eklenen  ürünlerin   eklenip  çıkarılması  işlemi  hem  arayüz   üzerinde,  hem  de  arayüzün  hemen  ardında   bulunan  veri  üzerinde  değişiklik  yapılmasını   gerekGrir.    
3. Giriş   •  Knockout  kütüphanesi,  bu  karmaşıklığı  ve  UI-­‐ Data  etkileşimini  yönetmek  için  Javascript   diliyle  gelişGrilmişGr.  Böylece  Knockout   sayesinde,  veri  üzerinde  meydana  gelen  bir   değişiklikle  arayüzün  ilgili  kısmının  otomaGk   olarak  ve  basit  bir  şekilde  güncellenmesi   sağlanır.  Sonuç  olarak,  gelişGricileri  bu   yöneGm  işinin  kodlama  karmaşıklığından  ve   çıkmazlarından  sıyrılmasına  yardımcı  olur.  
4. Knockout  JS  ?   •  Knockout  kütüphanesinin  arayüz  ile  ardındaki   veri  arasındaki  etkileşimi  yöneten  ve  bu   yöneGm  karmaşıklığını  basite  indirger.   •  Knockout  kütüphanesi,  Model-­‐View-­‐ ViewModel  tasarım  desenini  kullanır.  
5. Model  –  View  -­‐  ViewModel  
6. Model  –  View  -­‐  ViewModel   •  Model  :  Verinin  belli  bir  manTksal  kurgu   şeklindeki  halini  ifade  eder.     •  View  :  Verilerin  arayüzde  gösterilmesini   sağlayan  tüm  herşeyi  içeren  kısımdır.   Örneğin  :  Üyelik  oluşturmayı  sağlayan  HTML   sayfası  gibi.   •  ViewModel  :  Databinding  yapıları  sayesinde   Model  ve  View  arasında  bağdaşTrıcılık  görevi   yapar.  
7. Knockout  JS  Özellikler    Arayüz  ile  veriyi  birbirine  bağlar  ve  birbiriyle   etkileşimde  kalmasını  sağlar.      
8. Knockout  JS  Özellikler   Veride  meydana  gelen  değişiklik  sonucu  arayüzün   otomaGk  olarak  güncellenmesini  sağlar.  
9. Knockout  JS  Özellikler   Arayüz  üzerinde  tüm  sayfanın  yenilenmesi  yerine  ,   sadece  değişiklik  gereken  arayüz  kısımlarının   observable  ve  computed  gibi  yapılarla  dinamik   olarak  değişimi  sağlanır.    
10. Knockout  JS  Özellikler   TemplaGng  ile  birlikte  yeniden  kullanılabilir   bileşenler  tasarlanabilir.  
11. Knockout  JS  Avantajlar   •  Pure-­‐Javascript  ile  gelişGrilmişGr.   •  Server-­‐side  veya  client-­‐side  herhangi  bir   teknolojiyle  çalışabilir.   •  Yazılım  mimarisinde  herhangi  bir  köklü   değişiklik  gerekGrmeden  projeye  entegre   edilebilir.   •  Yaygın  olarak  kullanılan  tüm  tarayıcılarda   çalışır.  Örneğin,  Mozilla  Firefox,  Google   Chrome  vb.  
12. Knockout  JS  Avantajlar   •  Basit  databinding  yapıları  vardır.   •  JSON,  diziler  (arrays),  döngü  çeşitleri  için   UGlity  özellikleri  varsayılan  olarak  barındırır.   •  Arayüz  ve  veri  arasındaki  etkileşimi  yönetmek   basit  ve  esnekGr.   •  Javascript  tabanlı  diğer  kütüphanelerle  birlikte   kullanılarak  yüksek  fayda  sağlar.  Örneğin,   Jquery  ile  birlikte  kullanılması  gibi.  
13. Knockout  JS  Ne  Değildir  ?   •  Knockout  JS,  JQuery’nin  yerini  almak  amacıyla   ortaya  çıkmış  bir  kütüphane  değildir.  Aksine,   JQuery  ile  birlikte  kullanılabilir.       •  Knockout  JS  kütüphanesi  sadece  ölçeklenebilir   ve  veri  yönelimli  kullanıcı  ekranları   oluşturmaya  odaklanmışTr.   •  Knockout  JS  kütüphanesi  ile  birlikte  herhangi   bir  client-­‐side  ve  server-­‐side  teknoloji   kullanılabilir.  
14. Knockout  JS  Observables   •  Knockout  JS  kütüphanesinin  en  önemli   noktalarından  biri  de  observable  yapılardır.   •  Arayüz  ile  veri  arasındaki  etkileşimi  sağlayan   ve  birbirine  bağlayan  temel  yapıdır.   •  Observable  yapılar  veri  üzerindeki   değişiklikleri  gözlemler.  Herhangi  bir  değişim   sonucunda  arayüzün  ilgili  kısmını  otomaGk   olarak  günceller.  
16. Knockout  JS  Observables   •  Knockout  JS  ile  observable  oluşturmak  ve  veri   setlemek  aşağıdaki  gibidir.          var  name  =  ko.observable(‘Mehmet’);   •  Oluşturulmuş  olan  observable  yapı  içinden  veri   aşağıdaki  şekilde  alınabilir.          var  nameValue  =  name();        //  nameValue  değişkeninde  ‘Mehmet’  değeri   bulunacakTr.  
17. Knockout  JS  Observables   •  Uygulama  :      hlp://jsfiddle.net/batux/y2bdzbtp/  
18. Knockout  JS  Computed  Observables   •  Computed  alanlar  da  gözlemleme  yeteneğine  sahipGr.   Arayüz  ile  veriyi  birbirine  bağlar.  Observable  yapılar  ile   benzerdir.     •  En  önemli  fark  olarak  computed  yapılar  içinde   manTksal  yapılar  veya  algoritmalar  kurgulanabilir.   Örneğin,  girilen  kullanıcı  isim  ve  soy  isim  bilgisinin  bir   bütün  halinde  gösterilmesi  gibi.   •  ko.applyBindigs  kod  saTrı  tüm  observable  yapıları  akGf   hale  geGrilir.  
19. Knockout  JS  Computed  Observables   •  Computed  Observables  içinde  birden  fazla   observable  yapılar  bulunabilir.          var  name  =  ko.observable(‘Mehmet’);            var  lastName  =  ko.observable(‘Atak’);            var  fullName  =  ko.computed({          return  name()  +  ‘  -­‐  ’  +  lastName();          },  this);  
20. Knockout  JS  Computed  Observables   •  Uygulama  :    hlp://jsfiddle.net/Low0c66L/1/    
21. Knockout  JS  Pure  Computed   Observables   •  Computed  alanlardan  veri  okuma  yapılabildiği  gibi  aynı  zamanda   veri  yazmakta  mümkündür.   •  pureComputed  alanlar  ile  birlikte  veri  yazma  işlemide  yapılabilir.      var  fruits  =  ko.pureComputed(funcGon()  {      read  :  funcGon()  {        //  okuma  ile  ilgili  kod  bloğu      },      write  :  funcGon(value)  {        //  yazma  ile  ilgili  kod  bloğu      },      owner  :  this    });    
22. Knockout  JS  Pure  Computed   Observables     •  Uygulama  :    hlp://jsfiddle.net/gLqsywsx/27/    
23. Knockout  JS  Observable  Array   •  Yaş,  isim,  hacim  gibi  veriler  tek  bir  değer  ile  ifade   edilir.  Bu  durumlarda  observable  yapılar   kullanılır.     •  Fakat,  bir  dizi,  liste  veya  veri  kümesi  olduğu   durumlarda  ise  ObservableArray  kullanılması   gerekmektedir.  Bu  yapılarda  var  olan  veri  dizisi   üzerinde  gözlemleme  yapar.  Veri  dizisi  üzerinde   bir  değişiklik  meydana  geldiğinde  arayüzde  ilgili   kısımda  otomaGk  güncelleme  yapılır.  
24. Knockout  JS  Observable  Array   •  Örneğin,  alışveriş  sepeGne  eklenen,  çıkarılan   ürünleri  anlık  olarak  güncellemek   istenildiğinde  observableArray  yapısını   kullanılabilir.        var  shoppingChart  =  ko.observableArray();        var  urunListesi  =  [‘Bilgisayar’,  ‘Tablet’];        shoppingChart(urunListesi);  
25. Knockout  JS  Observable  Array   •  Observable  Array  yapılarındaki  fonksiyonlar.        push  :  listeye  eleman  ekler.      pop  :  listenin  son  elemanını  alır  ve  listeden  çıkarır.    remove  :  ilgili  elemanı  listeden  çıkarır.    removeAll  :  listedeki  tüm  elemanları  çıkarır.    indexOf  :  ilgili  elemanın  listenin  kaçıncı  indiste  olduğunu   verir.    sort  :  listeyi  sıralamayı  sağlar.    reverse  :  listeyi  tersine  çevirir.   •  Bunun  dışında  daha  bir  çok  özellik  bulunmaktadır.  
26. Knockout  JS  Observable  Array   •  Uygulama  :    hlp://jsfiddle.net/L9rqbde6/20/  
27. Knockout  JS  Bindings   •  Knockout  JS  ile  birlikte  farklı  Gpte  binding   yapıları  mevculur.  Genellikle,  var  olan  bir   HTML  elemenGnin  yazı  alanına  binding   örnekleri  yapıldı.     •  Bunun  dışında  html,  style,  visible,  aCribute,     css  ve  benzeri  özelliklere  de  observable   yapılar  aracılığıyla  binding  yapılabilir.  
28. ‘visible’  Binding   •  ‘visible’  binding  ile  birlikte  html  elemenGnin   görünürlülüğü  değişGrilebilir.  Örneğin,  girilen   email  bilgisinin  uygun  formala  olmaması   durumunda  alt  kısımda  uyarı  mesajının   görünür  olması  gibi.    <div  data-­‐bind=“visible  :  showWarning”></div>  
29. ‘visible’  Binding   •  Uygulama  :    hlp://jsfiddle.net/sk1at7rd/8/    
30. ‘html’  Binding     •  ‘html’  binding  ile  birlikte  html  elemenGne   html  kodları  içeren  meGn  verilebilir  .   •  Uygulama  :      hlp://jsfiddle.net/wLsovb92/1/    
31. ‘aCr’  Binding     •  ‘aCr’  binding  ile  birlikte  html  elemenGnin   herhangi  bir  niteliği  (alribute)  dinamik  olarak   değişGrilebilir.   •  Uygulama  :    hlp://jsfiddle.net/batux/pve30trc/14/  
32. Knockout  JS  Control  Flows   •  Knockout  JS  ile  birlikte  bir  takım  kontrol   ifadelerini  kullanabilmeye  imkan  tanır.   Özellikle  foreach  döngüsü,  if  binding  gibi  bir   kontrol  mekanizmaları  en  çok  kullanılanlarıdır.   •  Kontrol  mekanizmaları  :  foreach,  if,  ifnot,   with,  component  …    
33. ‘foreach’  Binding   ‘foreach’  binding  ile  birlikte  veri  listesi  şeklindeki   yapılar  üzerinde  döngü  kurulabilmesini  sağlar.   Örneğin,  bilgisayar  markalarının  ekrana  foreach   ile  yazdırılması  gibi.  
34. ‘foreach’  Binding   •  ‘foreach’  binding  ile  birlikte  veri  listesi  şeklindeki  yapılar  üzerinde  döngü   kurulabilmesini  sağlar.  Örneğin,  bilgisayar  markalarının  ekrana  foreach  ile   yazdırılması  gibi.    <div  data-­‐bind=“foreach:  computers”>    //  Her  iterasyonda  tekrarlanan  HTML  Kodları    </div>      ya  da        <!-­‐  -­‐  ko  foreach  :  computers  -­‐  -­‐>    <!-­‐  -­‐  /ko  -­‐  -­‐>      Yukaridaki  iki  şekilde  de  tanımlanabilir.    
35. ‘foreach’  Binding     •  Uygulama  :    hlp://jsfiddle.net/batux/z47pbthf/4/  
36. ‘with’  Binding   •  ‘with’  anahtar  sözcüğü  ile  birlikte  bir  binding   context  oluşturulur.  Bu  context  içinde  kalan   tüm  html  elementler  with  ile  oluşturulmuş   context’e  bağlıdır.      <div  data-­‐bind=“with:  customer”></div>  
37. ‘with’  Binding     •  Uygulama  :    hlp://jsfiddle.net/batux/xb8d4zs0/7/    
38. ‘if’  Binding   •  ‘if’  binding  aslında  visible  özelliğine  benzer.  ‘if’   içine  yazılan  koşul  gerçekleşmez  ise  if  ifadesi   ile  kapsanmış  olan  HTML  elementleri  HTML   DOM  ağacına  eklenmez.  Yani  HTML  sayfası   içinde  yer  almaz.  visible  kullanıldığında  ise   HTML  kısmı  sayfada  bulunur  fakat  görünürlük   özelliği  false  yapılır.  
39. ‘if’  Binding   •  Uygulama  :    hlp://jsfiddle.net/batux/rqrf6a21/2/  
40. ‘component’  Binding   •  ‘component’  binding  yöntemiyle  birlikte  görsel  ve  veri   modeli  olarak  bileşen  haline  geGrilmiş  modüler  ve   yeniden  kullanılabilir  yapılar  hazırlanabilir.     •  Böylece  kendi  içinde  çalışabilen  bileşenler  hazırlanmış   olur.  Aynı  bileşen  defalarca  kez  kullanılabilir.        ko.components.register('some-­‐component-­‐name',  {              viewModel:  <see  below>,              template:  <see  below>    });  
41. ‘component’  Binding     •  Uygulama  :    hlp://jsfiddle.net/batux/0feLa8qs/  
42. Knockout  JS  with  Form  Fields   •  Knock  JS  ile  birlikte  HTML  form  bileşenlerinin   çeşitli  özelliklerine  binding  işlemi  yapılabilir.   Böylece,  ilgili  HTML  bileşenin  Tklama  olayı,   CSS  özellikleri,  görünürlüğü  gibi  birçok  özelliği   dinamik  olarak  güncellenebilir  ve   değişGrilebilir.  
43. Knockout  JS  with  Form  Fields   •  Form  bileşenlerinde  kullanılabilen  binding  çeşitleri  aşağıdaki  gibidir.     •  ‘click’  binding   •  ‘event’  binding   •  ‘submit’  binding   •  ‘enable’  binding   •  ‘disable’  binding   •  ‘value’  binding   •  ‘textInput’  binding   •  ‘hasFocused’  binding   •  ‘checked’  binding   •  ‘opGons’  binding   •  ‘selectedOpGons’  binding  
44. Knockout  JS  with  Form  Fields   •  Uygulama  :    hlp://jsfiddle.net/batux/y647usso/3/  
45. Knockout  JS  REST  IntegraGon   •  Knockout  birçok  sunucu  taraflı  teknolojiyle   birlikte  çalışabilir.  Aynı  zamanda  veri  kaynağı   olarak  web  servislerinden  gelen  verileri   kullanabilir.  Jquery  yardımıyla  AJAX  çağrısı   yapılarak  web  servisten  veri  listesi  alınıp   Knockout  ‘observableArray’  ile  birlikte   kullanılacakTr.  
46. Knockout  JS  REST  IntegraGon   •  Uygulama  :    hlp://jsfiddle.net/zg0u9fwz/7/    
47. Kaynakça   •  hlp://knockoutjs.com/documentaGon/ introducGon.html   •  hlp://www.syncfusion.com/resources/ techportal/ebooks/knockoutjs   •  hlp://www.w3schools.com/   •  hlp://batuhanduzgun.net/    
48.            Teşekkürler  …                Sorularınız  ?