knockout 에 대한 간단한 리뷰.

1. Knockout
no more sapzil...

2. Introduction
- Simplify dynamic javascript UIs with the
Model-View-View Model(MVVM) pattern
- Declarative Bindings
- Automatic UI Refresh
- Dependency Tracking
- Templating

3. Headline feature
- 데이터 모델이 변경되면 관련한 UI가 자동적으
로 갱신됨.
- 간단하고 명료한 방식으로 UI와 모델을 연결가
능.
http://knockoutjs.com/index.html

4. Additional benefits
- 순수 자바스크립트,
- 작다.
- 대부분 브라우저에 돌아간다.

5. 실습.
http://learn.knockoutjs.com/
http://knockoutjs.com/examples/inde
x.html

6. 구현
Javascript
Html
The name is <span data-bind="text: personName"></span>
var xx = {
var myViewModel = function() {
var self = this;
self.xxx = ko.observable
var yyy =
personName: 'Bob',
personAge: 123
};
ko.applyBindings(myViewModel);
result: The name is <span><input type=”text” data-bind=”value:personName”></span>

7. Observable
여기가 마술.
var myViewModel = {
personName: ko.observable(‘32123’),
personAge: ko.observable(123)
};
쓰기 - (‘’),
읽기 - () get/set 개념.

8. Computed Observables
Observablearrays
function AppViewModel() {
var self = this;
self.firstName = ko.observable('Bob');
self.lastName = ko.observable('Smith');
self.fullName = ko.computed(function() {
return self.firstName() + " " + self.lastName();
});
}
self.fullname = rice smith;
<span
<input type=text data-bind=”value:frisd>
[ rice ][ ]
rice smth
<span data-bind=”text:fullName”></span>
<ul data-bind=”foreach: myOereer”
li data-bind=”text:name”

9. Bindings
- visible, text, html, css, style, attr
- foreach, if, ifnot, with
- click, event, submit, enable, disable, value ...

10. Observable
- MVVM and View Models(모델-뷰-뷰모델)
:모델: 데이터 저장소. UI와 독립적이며 데이
터 객체와 오퍼레이션 담당.
: 뷰모델 : UI와 연계되는 데이터 및 오퍼레이
션 담당.
: 뷰 : 선언적 바인딩을 이용한 HTML문서. 템
플릿을 사용할 수도 있음.