knockout.js overview
TRANSCRIPT
@ibarejs
#FRENDS����������� ������������������ JSAF Study
Custom data-* attribute<div 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]);}
observabledependentObservable
View<p>A: <span data-bind="text: A"></span></p><p>B: <span data-bind="text: B"></span></p>
Output
ViewModelvar viewModel = { firstName: ko.observable("길동"), lastName: ko.observable("홍")};
A: 홍B: 길동
observabledependentObservable
View<p>A: <span data-bind="text: A"></span></p><p>B: <span data-bind="text: B"></span></p><p>C: <span data-bind="text: C"></span></p>
Output
ViewModelvar viewModel = { A: ko.observable("홍"), B: ko.observable("길동")};viewModel.C = ko.dependentObservable(function () { return this.A() + this.B(); }, viewModel);
A: 홍B: 길동C: 홍길동
View
observabledependentObservable
<p>A: <input type="text" data-bind="value: A"></p><p>B: <span data-bind="text: B"></span></p><p>C: <span data-bind="text: C"></span></p>
Output
ViewModelvar viewModel = { A: ko.observable("홍"), B: ko.observable("길동")};viewModel.C = ko.dependentObservable(function () { return this.A() + this.B(); }, viewModel);
A: 홍B: 길동C: 홍길동
evaluatorFunctionOrOptionsevaluatorFunctionTargetoptions
dependentObservable
click binding
ViewOutput
ViewModelvar viewModel = { updateMyData: function () { var t = this.A(); this.v(t + 1); }};
<button data-bind="click: updateMyData">Update</button>
event binding
data-bind="event: { mouseover: a, mouseout: b}"
submit binding
<form data-bind="submit: doSomething">
...
<button type="submit">Submit</button></form>
enable binding
data-bind=" value: trueOrfalseRefFn, enable: o"
disable binding
data-bind=" value: trueOrfalseRefFn, disable: o"
checked binding
<input 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>
visibletexthtmlcss
styleattr
Any����������� ������������������ questions����������� ������������������ ?