Tổng quan về knockout js

  • View
    675

  • Download
    0

Embed Size (px)

Transcript

  1. 1. Knockout JS l th vin javascript gip bn to cc ng dng linh hot v mt m vi tng Data Model bn di. V d khi bn c mt giao din v cn phi cp nht d liu ng t View xung Model hoc t ng cp nht li View mi khi Model thay i hoc Model vi Model (ngi ta cn hay gi l 2 ways binding), th Knockout JS s gip bn thc hin tnh nng mt cch n gin v d dng bo tr sau ny. s dng th vin ny, cc bn hy download ti: http://knockoutjs.com/downloads/index.html Hoc s dng Bower tool: bower install knockout Trc khi chng ta tm hiu Observables th mnh xin gii thiu s v m hnh MVVM. Model View View-Model (MVVM) l mt Design Pattern gip bn pht trin ng dng linh hot bng cch tch bit ra 3 phn l Model, View v View Model. Model: l phn cha d liu ca ng dng v n c tch ring vi phn giao din ngi dng (UI). View: l phn c trnh by ra cho ngi dng u cui. N c nhim v hin th thng tin t model, ngi dng c th tng tc vi view (nhn nt login trn mn hnh) truyn mnh lnh xung cho view model cp nht model v view c th c cp nht thng tin khi trng thi thng tin trong model thay i (ta cn gi l c ch binding 2 way). Binding 2 way khng ch din ra gia view v model, n cn din ra gia cc model vi nhau. View Model: l phn m t d liu v cc thao tc trn UI. Lu rng n khng phi l phn d liu trong Model v cng khng phi l UI (Button, Checkbox, Label) trong View, m n qun l phn d liu m ngi dng ang tng tc. Activating Knockout v Observables hiu v tnh nng ny mnh s trnh by mt v d n gin cc bn d dng hiu c. Gi th chng ta bt u nh: http://js/jquery-2.1.3.js http://js/knockout-3.3.0.js http://js/bootstrap.js Chng ta thm cc Script nh trn c th s dng th vin Knockout. trn cc bn c th thm hoc b qua th vin Bootstrap (Bootstrap yu cu cn c th vin jQuery), v vy cc bn nh include lun jQuery nh. activating Knockout v Web Browser c th hiu c c php ca n, cc bn hy chn on script nh bn di:
  2. 2. ko.applyBindings(viewModel); C th on Script trn cui trang HTML hoc u trang v nm trong DOM ready handler ca jQuery $(function() { // Document is ready }); Cch th 2 activate Knockout: ko.applyBindings(, [DOM]); Dng lnh trn gm 2 tham s, tham s u tin th hin View Model m cc bn mun thao tc trn n, vi tham s th 2 l optional, cc bn c th truyn vo hoc khng, tham s ny th hin phn DOM Knockout tm thuc tnh data-bind (thuc tnh dng binding trong Knockout), v View Model tng ng s lm vic vi phn DOM tng ng m chng ta khai bo. V d: ko.applyBindings(viewModel, document.getElementById("elementID")); Cch activate ny c dng khi bn c nhu cu dng nhiu View Model trn nhiu phn DOM khc nhau trn trang HTML. Bt u mnh s trnh by cch bind data n gin t View Model ln View. u tin chng ta cn khai bo View Model, khai bo View Model n gin trong Knockout, chng ta ch cn khai bo mt object javascript. var viewModel = { name: Truc Nguyen, age: 23 }; Sau khai bo mt View n gin: Name:
    Age: Sau activate Knockout bng cch: ko.applyBindings(viewModel); Observable trong KnockoutJS Mt trong nhng tnh nng quan trng ca Knockout l t ng cp nht d liu ln View khi cc thuc tnh trong View Model thay i. Chc chn cc bn ang thc mc lm sao View c th bit m cp nht li d liu khi View Model thay i, th cu tr li chnh l Observables. C ngha l chng ta cn khai bo thuc tnh m chng ta c nhu cu t ng cp nht d liu ln View l observable, v observable l mt i tng javascript c bit nn cc thuc tnh no c khai bo l observable u s thng bo cho cc thuc tnh binding trn View v s thay i v t ng cp nht li d
  3. 3. liu ln View. var viewModel = { name: ko.observable('Truc Nguyen'), age: ko.observable(23) }; Trong View chng ta khng cn thay i g, s khc bit l khi name v age thay i, th d liu trn View s c cp nht tng ng. Mnh trnh by xong Knockout v Observables. Tng quan v Knockout js Gii thiu chung M hnh ca Knockout js(MVVM) Hng dn ci t Observables trong Knockout js Gii thiu chung Knockout(KO) l mt th vin ca Javascript, n gip bn to, hin th hay hiu chnh User Interface(UI) vi mt data model c nh ngha sn. Bt c khi no bn c phn thay i(thay i v action ca user hay d liu ni ti thay i) trong UI th KO c th gip bn thc hin n mt cch n gin, v d kim sot Cc tnh nng ni bt ca KO -Theo di t ng s ph thuc trng ny vo trng khc - T ng cp nht ng phn giao din khi c s thay i phn t ang c theo di. -Khai bo cc rng buc vi d liu - mt cch n gin kt ni cc phn trong UI n vi d liu trong model ca bn. -Lp trnh m rng - thc hin cc behavior ty chn cng nh vic khai bo rng buc mi cho vic ti s dng trong mt vi dng code. Mt s li ch khc: Th vin thun Javascript - Lm vic tt vi nhiu server hoc. Lm vic tt vi nhiu trnh duyt - (IE 6+, Firefox 2+, Chrome, Safari, ...).
  4. 4. Thch ng tt - C th d dng xc nh c cc chc nng ca n trn cc trnh duyt v cc nn tng mi. M hnh ca knockout js Developers thng quen vi m hnh MVC rt in hnh trong cc framework in hnh ca qu trnh pht trin ng dng web. Tuy nhin KO s dng m hnh MVVM (Model-View-ViewModel), n l mt bin th ca MVC. M hnh MVVM gm 3 phn chnh l: Model, View, ViewModel. View v Model c chc nng vai tr nh trong m hnh MVC. ViewModel trong MVVM nh l mt controller c bit, n cung cp cc hot ng, logic cn thit view c th ly c d liu thun tin. ViewModel c coi l mt view tru tng, n cha trng thi v cc bihavior ca view. Tuy nhin ViewModel khng cha cc tham chiu n thnh phn ca UI v khng bit g v cc thnh phn nhn thy ca View. Do c s tch bit r rng gia View v ViewModel. Hay ni mt cch khc l View layer l s nh x ca ViewModel M hnh MVVM c m t n gin nh sau: C th tt c cc qu trnh din ra qua cc bc sau: Mi user nhn vo mt nt trn mn hnh (thc hin mt action). Mt s kin bn ra cht kt dnh (binder). Cht kt dnh tm action logic tng ng trong ViewModel v thc thi n. Action logic truy cp d liu trong Model layer v cp nht tnh nng tng ng ca ViewModel . ViewModel thng bo cho binder mt vi tnh nng c thay i. Cc tnh nng va c cp nht l nh vic ti d liu t binder trong ViewModel. Binder sau cp nht cc thnh phn UI tng ng cung cp cc phn hi trc quan cho user. Hng dn ci t
  5. 5. Trc tin ci Bower package sudo npm install -g bower bower install knockout s dng n gin ch cn nhng vo th mt ni no trong code HTML. V d nh sau Observables To view models vi observables Nh vy v c bn, knockout js l mt m hnh thit k cho vic xy dng giao din ngi dng mt cch n gin m rt d dng cho vic chnh sa, cp nht d liu ngay trn view. to mt view model vi KO, bn cn phi khai bo mt JavaScript Object. V d (s dng framework laravel 4x):
  6. 6. Kt qu output s nh sau: Trong view r rng ta thy rng thuc tnh data-bind khng c trong HTML, n chnh l thuc tnh ca KO, chnh v HTML khng hiu c n nn bn cn phi active n trong ko.applyBindings(myViewModel); Tuy nhin, mi ch l vic lm th no bn create mt view model c bn v hin th chng bng cch dng binding, li ch ln nht ca KO l t ng cp nht UI khi view model thay i. V lm th no m KO c th bit phn view model ca bn thay i. Cu tr li l bn cn phi khai bo cc thuc tnh ca model bng observabels, bi v ch c Javascript object mi thng bo c cho ngi theo di bit v nhng thay i , v c th t ng tm thy s ph thuc Lm vic vi observables arrays Nu bn mun pht hin v phn hi li nhng thay i ca mt object, th bn dng observables. Cn nu bn mun pht hin v phn hi li nhng thay i ca tp hp nhiu th th bn dng observableArray, n c s dng kh ph bin trong KO. Thng th khi put mt object trong mt observableArray th s khng to c ton b cc thuc tnh cho bn thn mi mt observable. Tt nhin l bn hon ton c th to ra nhiu thuc tnh cho observable m bn mong mun Nu bn mun mng observable khi to bng rng, th bn khi to n theo cu trc nh sau: // This observable array initially contains three objects
  7. 7. var anotherObservableArray = ko.observableArray([ { name: "Bungle", type: "Bear" }, { name: "George", type: "Hippo" }, { name: "Zippy", type: "Unknown" } ]); alert('The length of the array is ' + myObservableArray().length); alert('The first element is ' + myObservableArray()[0]); Tuy nhin observableArray c nhiu tin ch hn so vi native JavaScript array, bi v: Lm vic tt trn mi trnh duyt. (V d, hm ca native JavaScript indexOf khng lm vic c vi IE 8 tr v trc tuy nhin KOs indexOf lm vic c tt) Hm thay i ni dung ca mt array nh push v splice, phng thc ca KO th t ng trigger tt c s kin trn UI v qua x l s t ng cp nht li UI. C php ca KO c rt nhiu convenient. gi phng thc push ca KO, vitmyObservableArray.push(...). y l cch hay hn 1 cht so vi vic gi n array push method vi vic vitmyObservableArray().push(...). Cc thao tc vi observableArray myObservableArray.push('Some new value') Thm mt item mi vo cui array myObservableArray.pop() xa b gi tr cui cng ca array v return n myObservableArray.unshift('Some new value') inserts mt new item v tr u tin ca array
  8. 8. myObservableArray.shift() xa b gi tr u tin ca array v returns n myObservableArray.reverse() o th t ca array myObservableArray.sort() sp xp ni dung ca array. o mc nh l sp xp theo alphabetical, tuy nhin bn c th thm vo cc ty chn sp xp. V d, sp xp mt mng person objects theo last name, bn c th vit nh saumyObservableArray.sort(function(left, right) { return left.lastName == right.lastName ? 0 : (left.lastName < right.lastName ? -1 : 1) }) myObservableArray.splice() xa v return li s ca thnh phn bt u t v tr nh index. V d,myObservableArray.splice(1, 3) xa 3 thnh phn bt u t v tr index s 1 (tc l xa thnh phn 2, 3, 4) and v return chng l mt mng. Mt s tin ch khc m Javascript array khng c nh sau: myObservableArray.remove(someItem) xa ton b gi tr bng vi someItem and returns chng v mt array myObservableArray.remove(function(item) { return item.age < 18 }) xa ton b gi tr caage m nh hn 18, v returns chng l mt array myObservableArray.removeAll(['Chad', 132, undefined]) xa ton b gi tr 'Chad', 123, or undefined v returns chng l mt array myObservableArray.removeAll() xa ton b gi tr v returns chng l mt array phn mt chng ta bit tng quan v knockout js (KO), cch to viewModel vi observables v lm vic vi observable arrays. Phn ny chng ta tip tc tm hiu v mt trong nhng thnh phn kh quan trng ca KO l Biding. Binding trong KO c mt s im ng ch nh sau: 1. Controlling text v appearance 2. Control flow
  9. 9. Phn 1: Controlling text v Appearance a. The visible binding Thuc tnh visible binding l nguyn