[knockoutjs]observable을 사용하여 데이터 관찰 객체와 함수형 차이

knockoutjs는 mvvm 패턴을 사용하여 데이터가 변하면 ui에 있는 값도 자동적으로 변경되게 해주는 라이브러리이다.

 

https://knockoutjs.com/documentation/observables.html

Knockout : Observables

 

처음 시작을 하게 되면 viewModel을 자바스크립트 객체 형태로 작성을 하게 되는데 live example을 보면 함수형태로 또 작성을 하고 있다. 여기에서 약간의 혼란이 발생을 하였고, 처음 객체형태인것으로 진행을 하다가 막히는 부분이 생겼다.

 

객체형태로 작성

    <span>Name:<input data-bind="value: firstName"></span>
    <span>last name:<input data-bind="value: lastName"></span>
    <h1>Hello, <span data-bind="text: fullName"></span></h1>
    <script>
        var model = {
            firstName:ko.observable('aaa'),
            lastName:ko.observable('bbb'),
        }
        model.fullName = ko.pureComputed(function(){
            return this.firstName() + this.lastName()
        },model)

        ko.applyBindings(model);
    </script>

model의 데이터에 접근해야 하는 fullName을 밖으로 빼서 코드를 적어야 한다. 객체가 닫히지 않았으므로 객체 내부에서는 접근이 불가능하다는듯 하다. 그래서 fullName을 외부에 정의해주었다.

 

함수형태로 작성

    <span>Name:<input data-bind="value: firstName"></span>
    <span>last name:<input data-bind="value: lastName"></span>
    <h1>Hello, <span data-bind="text: fullName"></span></h1>
    <script>

        var model = function(){
            this.firstName = ko.observable('aaa');
            this.lastName = ko.observable('bbb');
            this.fullName = ko.pureComputed(function(){
                return this.firstName() + this.lastName()
            },this);
        }

        ko.applyBindings(model);
    </script>

 

아래는 참고한 링크이며, 함수형태로 작성을 하는게 좋을듯 하다.

 

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

Difference between knockout View Models declared as object literals vs functions