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?