knockout.js 연습.

쉬운거부터 단계적으로 해보자.

http://jsbin.com/ajuxil/edit#javascript,html,live

html 은 이렇고

아이참 SyntaxHighlighter 왤케 안이쁘고 불편하지.

javascript 쪽은

ko.applyBindings({
    userid: '00114FEA0',
    userName: 'Tarzan',
    deptName: 'Jungle'
});

손으로 직접쳐보면 이해가 빠르다.

이게 기본이다.
Binding 하는 부분을 ViewModel로 분리하자.

http://jsbin.com/ajuxil/2/edit

var ViewModel = {
    userid: '00114FEA0',
    userName: 'Tarzan',
    deptName: 'Jungle'
};
ko.applyBindings(ViewModel);

조금 더 나은가?

정말 바인딩이 되었는지 확인해보자.
http://jsbin.com/ajuxil/3/edit

var ViewModel = {
    userid: '00114FEA0',
    userName: 'Tarzan',
    deptName: 'Jungle'
};
ko.applyBindings(ViewModel);

ViewModel.userName = 'Jane';

안된다.

물론 다시 applyBindings를 하면 적용이 된다.
이정도로 만족한다면 말리지 않겠다.
http://jsbin.com/ajuxil/4/edit

var ViewModel = {
    userid: '00114FEA0',
    userName: 'Tarzan',
    deptName: 'Jungle'
};
ko.applyBindings(ViewModel);

ViewModel.userName = 'Jane';
ko.applyBindings(ViewModel);

다음으로 넘어가자.

해당 Model을 관찰하고 있다가 변경이 되면 적용이 되도록 function형태로 View Model을 만들어보자.

http://jsbin.com/ajuxil/5/edit

var ViewModel = function(){
    this.userid = 'Jane';
    this.userName = 'Tarzan';
    this.deptName = 'Woohooo';
};
ko.applyBindings(new ViewModel());

너무 세세한가? 바보 취급 당하고 있다고 생각하지 말고 쳐보자.
직접 Object 를 만드는 것과 차이가 있다. 왜냐면 new ViewModel() 을 콘솔에서 해보면

new ViewModel()

ViewModel

1. deptName: "Woohooo"
2. userName: "Tarzan"
3. userid: "Jane"
4. __proto__: Object

이런 식으로 나오기 때문이다.
이 차이에 대한 자세한 설명은 생략한다.
Doug Crockford: JavaScript: The Good Parts 를 읽어보든가.
얇고 싼 좋은 책이니까 사라! 읽어라! 두번 읽어라!

수정 가능한 value 로 만들어서 실제 바인딩이 되는지 보자.
http://jsbin.com/ajuxil/7/edit
사실 ViewModel을 여러군데서 쓸게 아니라서 그냥 object 형태로 다시 돌아갔다.

html 도 추가하고

var ViewModel = {
  userid : ko.observable('00114FEA0'),
  userName : ko.observable('Tarzan'),
  deptName : ko.observable('Woohooo')
};
ko.applyBindings(ViewModel);

값에 ko.observable을 줬다.
실제로 텍스트박스 안의 내용을 변경해보면 리스트도 같이 변경되는 것을 볼 수 있다.

그럼 코드안에서 해당 뷰모델을 수정하려면?

ViewModel.userName('Jane');
이런 식으로 해당 ViewModel의 property를 function 처럼 사용해 변경하면 된다.

복수개의 항목을 다룰땐 어떨까?
http://jsbin.com/ajuxil/8/edit
먼저 뷰모델을 수정해보자.

var ViewModel = {
  dept:[
    {
      userid : ko.observable('00114FEA0'),
      userName : ko.observable('Tarzan'),
      deptName : ko.observable('Woohooo')
    },
    {
      userid : ko.observable('03AC99CA0'),
      userName : ko.observable('Jane'),
      deptName : ko.observable('Noooooo')
    }
    
  ]
};
ko.applyBindings(ViewModel);

html에선 간단하게 ul 에 foreach 를 달기만 하면 된다.

쿨하네. 멋지군.
복수개라고 해도 별반 다를 건 없다.

ViewModel.dept[1].userName('Kate');
이런 식으로 변경을 할 경우 바로 적용되는 것을 볼 수 있다.

디자이너(요즘은 퍼블리셔라고도 하나?)와 협업하여 작업할때 이상한 메타태그가 들어있으면 프로그래머에게 뷰를 전부 책임지게 하곤 하는데.
이제까진 어쩔 수 없었다. 하지만 MVVM(Model-View-ViewModel)은 다르다.
서로 안망가진 화면을 보면서 작업할 수 있다. 물론 예외상황이 없진 않겠지만.
그리고 프로그래머 입장에서도 뷰와 모델간의 분리를 통해 소스(자바스크립트)안에 지저분하게 DOM을 만지작거리는 작업으로부터 벗어날 수 있다.
개인적으로 서버사이드에서 CSS 셀렉터로 html 을 수정하여 렌더링하는 템플릿 방식을 만들어서 쓰곤 했었는데 물론 이 방식은 javascript 가 안되는 환경에서도 쓸 수 있다던가 검색엔진으로부터 인덱싱이 된다던가 하는 장점이 있지만 클라이언트에서도 어짜피 REST API를 ajax호출하는 방식으로 얼마든지 데이터를 갱신할 수 있기 때문에 knockout.js 의 강력한 데이터 바인딩을 누려보는 것도 좋은 선택이 될 수 있겠다.