객체 리터럴과 함수로 선언 된 녹아웃 뷰 모델의 차이점

객체 리터럴과 함수로 선언 된 녹아웃 뷰 모델의 차이점

---

녹아웃 js에서 View Models가 다음 중 하나로 선언 된 것을 볼 수 있습니다.

var viewModel = {
    firstname: ko.observable("Bob")
};

ko.applyBindings(viewModel );

또는:

var viewModel = function() {
    this.firstname= ko.observable("Bob");
};

ko.applyBindings(new viewModel ());

둘 사이의 차이점은 무엇입니까?

knockoutjs Google 그룹 에서이 토론 을 찾았 지만 실제로 만족스러운 답변을주지 못했습니다.

예를 들어 다음과 같은 데이터를 사용하여 모델을 초기화하려는 이유를 알 수 있습니다.

var viewModel = function(person) {
    this.firstname= ko.observable(person.firstname);
};

var person = ... ;
ko.applyBindings(new viewModel(person));

그러나 내가 그렇게하지 않으면 내가 선택한 스타일이 중요합니까?

---

함수를 사용하여 뷰 모델을 정의하면 몇 가지 장점이 있습니다.

주요 이점은 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);
};

이 주제에 대해 말할 수있는 것이 더 많으며 모듈 패턴 및 모듈 패턴 표시와 같이 탐색 할 수있는 많은 패턴이 있지만 기본적으로 함수를 사용하면 객체 생성 방법 및 참조 기능에 대한 유연성과 제어력이 향상됩니다 인스턴스 전용 인 변수

---

비슷한 방법으로 다른 방법을 사용합니다.

var viewModel = (function () {
  var obj = {};
  obj.myVariable = ko.observable();
  obj.myComputed = ko.computed(function () { return "hello" + obj.myVariable() });

  ko.applyBindings(obj);
  return obj;
})();

몇 가지 이유 :

1. Not using this, which can confusion when used within ko.computeds etc
2. My viewModel is a singleton, I don't need to create multiple instances (i.e. new viewModel())

참고URL : https://stackoverflow.com/questions/9589419/difference-between-knockout-view-models-declared-as-object-literals-vs-functions