[javascript] Knockout.js에서의 뷰모델 객체 생성 방법은?

21 Nov 2023

javascript

JavaScript로 뷰모델 객체 생성하기

// 뷰모델 객체 생성
var viewModel = {
    name: ko.observable("John"), // Observable 속성
    age: ko.observable(25),
    gender: ko.observable("Male")
};

// 뷰모델 바인딩
ko.applyBindings(viewModel);

함수로 뷰모델 객체 생성하기

function ViewModel() {
    var self = this;
    self.name = ko.observable("John");
    self.age = ko.observable(25);
    self.gender = ko.observable("Male");
}

// 함수로 뷰모델 객체 생성
var viewModel = new ViewModel();

// 뷰모델 바인딩
ko.applyBindings(viewModel);

클래스로 뷰모델 객체 생성하기

class ViewModel {
    constructor() {
        this.name = ko.observable("John");
        this.age = ko.observable(25);
        this.gender = ko.observable("Male");
    }
}

// 클래스로 뷰모델 객체 생성
var viewModel = new ViewModel();

// 뷰모델 바인딩
ko.applyBindings(viewModel);

위의 예시에서는 Knockout.js의 ko.observable() 함수를 사용하여 뷰모델 객체의 속성을 생성합니다. 이를 통해 변경 감지와 데이터 바인딩을 쉽게 구현할 수 있습니다. 뷰모델 객체는 ko.applyBindings() 메서드로 HTML 요소와 바인딩되어 해당 요소의 내용이 뷰모델의 속성과 동기화됩니다.

더 자세한 내용은 Knockout.js 공식 문서를 참조하시기 바랍니다.

참조: Knockout.js 공식 문서