http://knockoutjs.com/documentation/introduction.html
위의 글을 번역한겁니다.
Knockout은 자바스크립트 라이브러리입니다. 이 라이브러리는 여러분들에게 Rich그리고 반응형 화면, Editor user Interface을 깔끔한 데이터 모델과 함께 제공해 줍니다. 여러분들이 동적으로 UI를 업데이트 할때 , KO는 여러분들이 단순하고 관리하기 쉽게 구현하는 것을 제공해 줍니다.
주요 특징 :
- 훌륭한 종속 트랙킹 - 데이터 모델이 변경 되었을때 정확한 UI부분을 자동으로 업데이트 해줍니다.
- 지시적 바인딩 - 간단하고 확살한 방법으로 모델과 UI을 연결해 줍니다. 바인딩 context를 사용함으로 여러분들은 복잡한 동적 UI를 쉽게 만들수 있습니다.
- 확장성 - 단 몇줄의 코딩으로 Custom Behavior들을 구현할 수 있습니다. (새로운 지시적 바인딩을 사용)
추가적인 이점들 ;
- 순수한 자바스크립트 라이버러리 - 어떤한 서버 또는 클라이언트에서 작동합니다.
- 기존의 web application의 Top에 추가될수 있습니다.(아키텍처의 변경은 전혀 없음)
- 당야한 브라우저에서 작동합니다.
- 포괄적인 명세서 (정확한 기능들은 어떤한 플랫폼 어떠한 브라우저에서 확인 가능합니다.)
Ruby on Rails, ASP.NET MVC, MV* 기술들을 사용하는 개발자들은 지서어 문법과 함께 리얼타임 MVC형태의 MVVM 을 보게 될것입니다.
어떻게 그럼 사용할 까요?
빠르고 재밌는 방법으로 시작하기 위해 http://learn.knockoutjs.com/ 에서 실습하는것입니다. 기초를 습득했다면 좀더 많은 샘플들을 만나보세요.(http://knockoutjs.com/examples/)
KO가 JQuery와 경쟁하기 위해 만들어 졌냐? 아니면 같이 사용할수 있게 만들어 졌냐?
모든사람이 JQuery를 사랑합니다.!. Jquery는 우리가 과거에 열씸히 씨름하는 DOM API의 투박하고 일관성없는 것들을 대체하는 중요한 라이브러리입니다. jQuery는 또한 웹페이지의 요소들과 이벤트 핸들러를 Low Level단에서 수정할수 있게 해줍니다. 나 또한 jQuery를 아직까지 사용하고 있습니다. KO는 다른 문제들을 해결하는데 사용됩니다.
만약 여러분들을 UI가 중복된 그리고 많은 behavior들을 가지고 있다면 관리하는데에 있어서 많은 어려움이 있을것입니다. (jQueyr를 사요하더라도) 한 예를 생각해 보십시오: 여러분들은 여러 아이템들을 보여주고 있습니다. 이 말은 리스트 안에 여러 아이템이 있다는 말이죠 그리고 'Add'버튼을 활성화 시키고자 합니다. 조건은 아이템이 5개 미만일때.
jQuery는 모델바인딩이라는 개념이 없습니다. 그리하여 아이템의 갯수를 가져오려 하면 테이블의 TR갯수를 세어야 합니다. 아니면 DIV의 어떤 CSS class의 숫자를 세어야 합니다. 유저가 아이템을 추가할때 아마 많은 아이템들이 span에 보여지고 여러분들은 SPAN의 텍스트들을 업데이트 해줘야할겁니다. 또한 여러분은 'Add'버튼을 비활성화 시키는것 또한 해줘야할겁니다(만약Tr이 5개 이상일경우). 후에 여러분들이 'Delete'버튼을 구현해야한다면 여러분들은 버튼이 클릭될 때만다 DOM의 요소들을 어떻게 다뤄야할지 고민을 할것입니다.
Knocout은 어떻게 다른가?
위의 예는 KO를 사용하면 쉽습니다. KO는 복잡한것들을 쉽게 구현하게 해줍니다. 단지 여러분들의 아이템들을 JavaScript Array로 나타내고 foreach를 사용하여 Table또는 Div로 변경시켜줍니다. Array가 변경될때 UI는 자동적으로 변경됩니다. 다른 UI도 동기화 되어있습니다. 예를 들면 여러분들은 다음과 같이 SPAN에 아이템의 숫자를 바인딩할것입니다.
There are <span data-bind="text: myItems().count"></span> items<button data-bind="enable: myItems().count < 5">Add</button> |