함수를 사용하여 뷰 모델을 정의하면 몇 가지 장점이 있습니다.
주요 이점은 this
생성중인 인스턴스와 동일한 값에 즉시 액세스 할 수 있다는 것입니다. 이것은 당신이 할 수 있음을 의미합니다 :
var ViewModel = function(first, last) {
this.first = ko.observable(first);
this.last = ko.observable(last);
this.full = ko.computed(function() {
return this.first() + " " + this.last();
}, this);
};
따라서 계산 된 옵저버 블은 this
다른 범위에서 호출 된 경우에도 의 적절한 값에 바인딩 될 수 있습니다 .
객체 리터럴을 사용하면 다음을 수행해야합니다.
var viewModel = {
first: ko.observable("Bob"),
last: ko.observable("Smith"),
};
viewModel.full = ko.computed(function() {
return this.first() + " " + this.last();
}, viewModel);
이 경우 viewModel
계산 된 Observable에서 직접 사용할 수 있지만 즉시 (기본적으로) 평가되므로 viewModel
개체 리터럴을 닫을 때까지 정의되지 않은 것처럼 개체 리터럴 내에 정의 할 수 없습니다 . 많은 사람들이 뷰 모델 생성이 한 번의 호출로 캡슐화되는 것을 좋아하지 않습니다.
this
항상 적절한 지 확인하기 위해 사용할 수있는 또 다른 패턴 은 함수의 변수를 적절한 값과 동일하게 설정 this
하고 대신 사용하는 것입니다. 이것은 다음과 같습니다
var ViewModel = function() {
var self = this;
this.items = ko.observableArray();
this.removeItem = function(item) {
self.items.remove(item);
}
};
이제 개별 항목의 범위에 있고를 호출 $root.removeItem
하면의 값 this
은 실제로 해당 수준에서 바인딩되는 데이터 (항목)가됩니다. 이 경우 self를 사용하면 전체 뷰 모델에서 제거 될 수 있습니다.
다른 옵션은 bind
최신 브라우저에서 지원하고 지원되지 않는 경우 KO에서 추가하는을 사용하는 것입니다. 이 경우 다음과 같습니다.
var ViewModel = function() {
this.items = ko.observableArray();
this.removeItem = function(item) {
this.items.remove(item);
}.bind(this);
};
이 주제에 대해 말할 수있는 것이 더 많고 모듈 패턴 및 모듈 패턴 표시와 같이 탐색 할 수있는 많은 패턴이 있지만 기본적으로 함수를 사용하면 오브젝트 작성 방법 및 참조 기능에 대한 유연성과 제어 기능이 향상됩니다. 인스턴스 전용 인 변수
prototype
(예를 들어 서버에서 데이터를 가져 와서 뷰 모델을 적절하게 업데이트하는 방법과 같은 메소드). 그러나 여전히 객체 리터럴의 속성으로 명시 적으로 선언 할 수 있으므로 실제로 차이를 볼 수는 없습니다.