js#FRENDS    JSAF Study    @ibare
Custom data-* attributediv id=out  data-id=good  data-name=joe  data-screen-name=user1/div           for (var key in el.da...
observable  dependentObservableA: 홍B: 길동                                            OutputpA: span data-bind=text: A/span/...
observable  dependentObservableA: 홍                                                     OutputB: 길동C: 홍길동pA: span data-bin...
observable  dependentObservableA: 홍                                                     OutputB: 길동C: 홍길동pA: input type=te...
dependentObservableevaluatorFunctionOrOptionsevaluatorFunctionTargetoptions
click binding                                                          Outputbutton data-bind=click: updateMyDataUpdate/bu...
event binding data-bind=event: {     mouseover: a,     mouseout: b }
submit bindingform data-bind=submit: doSomething    ...    button type=submitSubmit/button/form
enable binding data-bind=   value: trueOrfalseRefFn,   enable: o
disable binding data-bind=   value: trueOrfalseRefFn,   disable: o
checked bindinginput type=checkbox  data-bind=checked: o
options binding select   data-bind=options: aobfn /select aobfn : ko.observableArray(   [a, b, c] )
selectedOptions binding select   data-bind=options: aobfn,   selectedOptions: saobfn /select
visible text html  css style  attr
Anyquestions?
Upcoming SlideShare
Loading in …5
×

Knockout.js Overview

2,645 views

Published on

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,645
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
58
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Knockout.js Overview

  1. 1. js#FRENDS JSAF Study @ibare
  2. 2. Custom data-* attributediv id=out data-id=good data-name=joe data-screen-name=user1/div for (var key in el.dataset) {   console.log(key); console.log(el.dataset[key]); }
  3. 3. observable dependentObservableA: 홍B: 길동 OutputpA: span data-bind=text: A/span/ppB: span data-bind=text: B/span/p Viewvar viewModel = { ledoMweiV    firstName: ko.observable(길동),    lastName: ko.observable(홍)};
  4. 4. observable dependentObservableA: 홍 OutputB: 길동C: 홍길동pA: span data-bind=text: A/span/ppB: span data-bind=text: B/span/ppC: span data-bind=text: C/span/p Viewvar viewModel = { ledoMweiV    A: ko.observable(홍),    B: ko.observable(길동)};viewModel.C = ko.dependentObservable(function () { return this.A() + this.B(); }, viewModel);
  5. 5. observable dependentObservableA: 홍 OutputB: 길동C: 홍길동pA: input type=text data-bind=value: A/ppB: span data-bind=text: B/span/ppC: span data-bind=text: C/span/p Viewvar viewModel = { ledoMweiV    A: ko.observable(홍),    B: ko.observable(길동)};viewModel.C = ko.dependentObservable(function () { return this.A() + this.B(); }, viewModel);
  6. 6. dependentObservableevaluatorFunctionOrOptionsevaluatorFunctionTargetoptions
  7. 7. click binding Outputbutton data-bind=click: updateMyDataUpdate/button Viewvar viewModel = { ledoMweiV    updateMyData: function () { var t = this.A(); this.v(t + 1); }};
  8. 8. event binding data-bind=event: { mouseover: a, mouseout: b }
  9. 9. submit bindingform data-bind=submit: doSomething    ...    button type=submitSubmit/button/form
  10. 10. enable binding data-bind= value: trueOrfalseRefFn, enable: o
  11. 11. disable binding data-bind= value: trueOrfalseRefFn, disable: o
  12. 12. checked bindinginput type=checkbox data-bind=checked: o
  13. 13. options binding select data-bind=options: aobfn /select aobfn : ko.observableArray( [a, b, c] )
  14. 14. selectedOptions binding select data-bind=options: aobfn, selectedOptions: saobfn /select
  15. 15. visible text html css style attr
  16. 16. Anyquestions?

×