The document discusses various KnockoutJS bindings such as click, event, submit, enable, disable, checked, options, selectedOptions, visible, text, html, css, style, and attr. It provides examples of how to use these bindings in HTML views to link DOM elements to observable view model properties. Custom data bindings can also be created by defining a binding handler function.

1. js
#FRENDS
JSAF Study
@ibare

2. 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]);
}

3. observable
dependentObservable
A: 홍
B: 길동 Output
pA: span data-bind=text: A/span/p
pB: span data-bind=text: B/span/p View
var viewModel = {
ledoMweiV
firstName: ko.observable(길동),
lastName: ko.observable(홍)
};

4. observable
dependentObservable
A: 홍
Output
B: 길동
C: 홍길동
pA: span data-bind=text: A/span/p
pB: span data-bind=text: B/span/p
pC: span data-bind=text: C/span/p
View
var viewModel = {
ledoMweiV
A: ko.observable(홍),
B: ko.observable(길동)
};
viewModel.C = ko.dependentObservable(function () {
return this.A() + this.B(); }, viewModel);

5. observable
dependentObservable
A: 홍
Output
B: 길동
C: 홍길동
pA: input type=text data-bind=value: A/p
pB: span data-bind=text: B/span/p
pC: span data-bind=text: C/span/p
View
var viewModel = {
ledoMweiV
A: ko.observable(홍),
B: ko.observable(길동)
};
viewModel.C = ko.dependentObservable(function () {
return this.A() + this.B(); }, viewModel);

6. dependentObservable
evaluatorFunctionOrOptions
evaluatorFunctionTarget
options

7. click binding
Output
button data-bind=click: updateMyDataUpdate/button
View
var viewModel = {
ledoMweiV
updateMyData: function () {
var t = this.A();
this.v(t + 1);
}
};

8. event binding
data-bind=event: {
mouseover: a,
mouseout: b
}

9. submit binding
form data-bind=submit: doSomething
...
button type=submitSubmit/button
/form

10. enable binding
data-bind=
value: trueOrfalseRefFn,
enable: o

11. disable binding
data-bind=
value: trueOrfalseRefFn,
disable: o

12. checked binding
input type=checkbox
data-bind=checked: o

13. options binding
select
data-bind=options: aobfn
/select
aobfn : ko.observableArray(
['a', 'b', 'c']
)

14. selectedOptions binding
select
data-bind=options: aobfn,
selectedOptions: saobfn
/select

15. visible
text
html
css
style
attr

16. Any
questions?