Observables
Kockout은 3가의 핵심 기능이 있습니다.
1. Observacles and dependency tracking
2. Declarative Bindings
3. Templating
이페이지에서는 여러분들은 셋중에 첫번째 것을 배우게 될것입니다. 시작하기에 앞서 MVVM패턴이 무엇인지 그리고 View Model의 개념이 무엇인지 설명하겠습니다.
MVVM and View Models
Model-View-View Model(MVVM)은 디자인 패턴의 하나로써 User Interfaces를 구성하는데 사용합니다. 이 패턴은 여러분들이 어떻게 세련된 UI를 심플하게 3파트로 나눠서 구성할수 있는 가를 설명합니다.
- Model : 여러분들의 application의 저장 데이터. 이 데이터는 객체들을 나타내고 비지니스 도메인을 구동합니다.(예 은행의 송금) 그리고 어떠한 UI와 독립적입니다. KO를 이용할때 여러분들은 Ajax로 서버호출을 통하여 저장된 model data를 읽거나 쓰게 됩니다.
- View Model : 순수한 데이터를 나타내는 코드 그리고 UI와 함께 구동된다. 에를들면 만약 여러분들이 list editor을 구현한다하면 여러분들의 view model은 리스트 아이템들을 가지고 있는 object일 것입니다. 그리고 아이템을 추가하거나 삭제하는 메서드들을 노출할 것입니다.
View Model은 UI자체가 아닙니다. 버튼그리고 화면의 스타일들의 대한 어떻나 컨셉도 없습니다. 또한 persisted data도 아닙니다 - 단지 유저들이 조작하는 저장되지 않은 데이터들을 가지고 있을 뿐입니다. KO를 이용할때 여러분들의 view model들은 순수한 자바스크립트 객체로 HTML의 어떠한 지식도 가지고 있지 않습니다. view model을 추상화 시키기 위해 심플함을 유지해야합니다. 그리하여 여러분들은 복작한 behavior들을 관리할수 있게 됩니다.
- View : 보여지는것들 Interactive UI는 view model의 상태를 나타냅니다. View는 view model로 정보들을보여줍니다. 그리고 view model에 명령합니다.(예 유저의 버튼 클릭) 또한 view model의 변경이 있을때 자동 업데이트를 해줍니다.
view model을 KO와 함께 생성하기위해 단지 Javascriopt 객체를 선언해주면 됩니다. 예를 들면 다음과 같습니다.
var myViewModel = { personName: 'Bob', personAge: 123};다음으로 여러분들은 지시적인 binding을 사용하여 view model의 view을 간단하게 생성할 수 있습니다. 예를 들면 다음과 같은 markup은
personName 값을 보여줍니다. :The name is <span data-bind="text: personName"></span> |
Activating Knockout
data-bind 속성은 순수한 HTML의 속성이 아닙니다. 그러나 아무문제 없습니다.
그러나 브라우저가 이 속성을 알지 못하기 때문에 여러분들은 Kockout을 활성화 시켜야 합니다.
Kockout을 활성화 시키기 위해 <script>블록에 다음과 같은 라인을 추가합니다.
ko.applyBindings(myViewModel); |
여러분들은 HTML의 맨마지막 밑에 스크립트 블럭을 삽입할 수 있습니다. 또는 맨 위에 DOM ready핸들러에 컨텐츠를 포함시킬수 있습니다.
이게 전부입니다. 여러분의 view는 마치 다음의 HTML을 코딩한것처럼 보여지게 될것입니다.
The name is <span>Bob</span> |
- 첫번째 파라미터는 어떤 view model 객체를 여러분들이 사용하고자 하는지입니다.
- 선택적으로 여러분들은
data-bind 특성을 적용하기 위한 부분을 지정할수 있습니다. 어떻게요? 두번째 파라미터를 설정함으로 가능합니다. 예를 들면
ko.applyBindings(myViewModel, document.getElementById('someElementId')). 이렇게 하면 특정한 ID값을 갖는 요소만 적용되게 됩니다. 또는 그의 자손들에게 적용됩니다. 이러한 기능은 만약 여러분들이 여러개의 view model들을 작성하기 원한다면 더욱 유용할것입니다.
매우 깜끔하죠?
Observables
여러분들은 어떻게 view model을 생성하고 어떻게 프로퍼티들을 바인딩하여 보여주는지 보았습니다. 그러나 KO의 이점중의 한가지 바로 view model이 변경되었을때 UI를 자동으로 업데이트 시켜주는 것은 보지 못했습니다. 어떻게 KO는 view model의 변경을 알아 차리를 수 있을까요? 답은 : 여러분들은 model 속성에 observables과 같이 선언을 해줘야한다는 것입니다. 이러한 특별한 자바스크립트 객체때문에 변경에 대해서 구독자에게 알림을 할수 있게 됩니다. 그리고 자동으로 종속적인것들을 감지할수 있습니다.
예를들면 아래와 같이 view model객체를 재 작성해 보지요
var myViewModel = { personName: ko.observable('Bob'), personAge: ko.observable(123)}; |
여러분은 view 는 전혀 손대지 않으셔도 됩니다. 즉 data-bind 의 문법은 계속 유효하다는 얘기지요. 단지 여기에서의 차이는 변경을 감지할수 있는 기능이 있다는 것입니다. 그리고 변경이 일어날때 view는 자동으로 업데이트 됩니다.
Reading and writing observables
모든 브라우저가 getter와 setter를 지원하지 않습니다. 그리하여 호환성을 위해 ko.observable 객체는 실제적으로 기능들입니다.
- observable의 현재 값을 읽기 위해서 단지 파라미터 없이 observable을 호출하면 됩니다. 예를들면
myViewModel.personName()는 'Bob'을 그리고
myViewModel.personAge()는 '123'을 리턴하게 됩니다. - observable에 새로운 값을 쓸때는 observable을 콜하고 거기에 파라미터로 새로운 값을 넣으면 됩니다. 예를 들면 myViewModel.personName('Mary')는 값을 'Mary'로 변경시킬겁니다.
- 여러개의 observable 속성을 변경하고 싶을때 여러분은 체인 문법을 사용할수 있습니다. 예를 들면 myViewModel.personName('Mary').personAge(50)
Explicitly subscribing to observables
여러분은 구동을 수동으로 등록할 필요가 없습니다. 초보자들은 이 섹션을 넘기셔도 됩니다.
고수들을 위해 여러분들이 여러분들만의 구독을 등록하고 싶다 하시면 여러분들은
subscribe 함수를 호출하시면 됩니다. 예를 들면 myViewModel.personName.subscribe(function(newValue) { alert("The person's new name is " + newValue);}); |
subscribe함수는 얼마나 많은 KO의 부분들인 내부적으로 일하는지 알수 있습니다. 여러분들은 또한 subscription을 해제할수 있습니다. 예는 아래와 같습니다.var subscription = myViewModel.personName.subscribe(function(newValue) { /* do stuff */ });// ...then later...subscription.dispose(); // I no longer want notifications |