knockout - 기본 객체

기본 객체

Observable 객체

Knockout 라이브러리는 모델을 Observable 객체라고 부릅니다. 모델의 변화를 계속 감시하므로 모델을

Observable 객체라고 부릅니다.

예) // 객체 생성 - ko.observable();

var name = ko.observable('imdsoho');    

name('HAPPY');

alert(name());

[결과] HAPPY

ObservableArray 객체

Knockout 라이브러리는 컬렉션을 ObservableArray 객체라고 부릅니다.

예) // 객체 생성 - ko.observableArray();

var people = ko.observableArray([    // 컬렉션 선언

{name: ko.observable(''),

region: ko.observable('')}

,{name: ko.observable(''),

region: ko.observable('')

}

]); 

people.push({                        // 데이터 추가

name: ko.observable(''),

region: ko.observable('')

});

alert( people() );                      // 데이터 조회 - 함수 형태로 실행해야 객체의 요소를 가져올 수 있음.

people.remove(people()[0]);    // 데이터 삭제

ko.utils.arrayForEach() 메소드

ObservableArray 객체는 ko.utils.arrayForEach() 메서드로 반복문을 적용합니다.

예)

ko.utils.arrayForEach(people(), function(item){

console.log(item);

});

Knockout 라이브러리의 ObservableArray 객체도 일반 자바스크립트 배열이 아닙니다.

ko.toJS() - ObservableArray 객체를 자바스크립트 배열로 변환합니다.

ko.toJSON() - ObservableArray 객체를 JSON 형식으로 변환합니다.

예)

console.log(ko.toJS(people));

console.log(ko.toJSON(people));

ko.applyBindings() 

기본 객체는 ko.applyBindings() 메서드의 매개변수로 입력하면 뷰와 자동으로 동기화합니다.

예)

ko.applyBindings({

people: ko.observable([{},{}])

});

이렇게 뷰와 모델을 연결하면 자동으로 뷰와 뷰모델이 동기화되는 패턴이 MVVM 패턴입니다.