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

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

녹아웃 j에서는 View Model이 다음 중 하나로 선언됩니다.

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

ko.applyBindings(viewModel );

또는:

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

ko.applyBindings(new viewModel ());

둘 사이에 차이점이 있다면 무엇입니까?

나는 녹아웃js 구글 그룹에서 이 토론을 찾았지만 그것은 나에게 만족스러운 답을 주지 못했습니다.

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

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직접 계산된 관측 가능하지만 즉시(기본적으로) 평가되므로 객체 리터럴 내에서 정의할 수 없습니다.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를 사용하여 전체 뷰 모델에서 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. 사용하지 않음this내부에서 사용할 경우 혼동될 수 있습니다.ko.computed
2. 즉, My viewModel)를 생성할 필요가 없습니다.new viewModel())

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