## 녹아웃 뷰 모델: 객체 리터럴과 함수 - 어느 것이 더 낫나요?

Knockout 뷰 모델 선언을 위한 객체와 함수

Knockout JS에서 뷰 모델은 객체 리터럴 또는 함수로 선언될 수 있습니다. 다음 예를 고려하십시오.

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

ko.applyBindings(viewModel );

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

ko.applyBindings(new viewModel ());

두 접근 방식 모두 동일한 목표를 달성하지만 뷰 모델을 함수로 정의하면 여러 가지 이점이 있습니다.

'this'에 대한 직접 액세스

함수 내 '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);
};

반대로 객체 리터럴을 사용할 때는 계산된 관찰 가능 항목 내에 명시적인 컨텍스트 바인딩이 필요합니다.

var viewModel = {
   first: ko.observable("Bob"),
   last: ko.observable("Smith"),
};

viewModel.full = ko.computed(function() {
   return this.first() + " " + this.last();
}, viewModel);

캡슐화 및 변수 개인정보 보호

함수는 전역 범위에 노출되지 않는 개인 변수를 정의할 수 있으므로 뷰 모델에 대한 보다 자연스러운 캡슐화를 제공합니다. 이는 실수로 덮어쓰거나 충돌하는 것을 방지하는 데 도움이 됩니다.

var ViewModel = function() {
    var self = this;
    this.items = ko.observableArray();
    this.removeItem = function(item) {
         self.items.remove(item);
    }
};

마지막으로 함수는 'bind' 메서드를 사용하여 쉽게 바인딩할 수 있어 콜백 함수에 대한 올바른 컨텍스트를 보장합니다.

var ViewModel = function() {
    this.items = ko.observableArray();
    this.removeItem = function(item) {
         this.items.remove(item);
    }.bind(this);
};

요약 녹아웃 뷰 모델을 정의하는 두 가지 방법 모두 유효하지만 함수를 사용하면 더 큰 유연성, 제어 및 캡슐화 이점이 제공됩니다. 이러한 이점으로 인해 함수는 더 복잡하고 유지 관리가 쉬운 뷰 모델에 선호됩니다.

위 내용은 ## 녹아웃 뷰 모델: 객체 리터럴과 함수 - 어느 것이 더 낫나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!