[knockoutjs]viewModel에 함수 정의 위치에 따른 차이

knockoutjs의 기본 예제에 있는 코드를 참고하여  submit에 사용되는 함수의 위치에 따른 코드 차이와

visible을 적용한 샘플 코드이다.

 

외부에 선언을 할 경우에는 생성을 하고 함수에 this를 bind해줘야 한다.

 

    <form data-bind="submit: $root.addItem"><!--addItem-->
        addItem <input data-bind="value: $root.newItem">
    </form>
    <form data-bind="submit: $root.addItem2.bind(this)"><!--addItem2-->
        addItem2 <input data-bind="value: $root.newItem">
    </form>

    <select data-bind="options: items"></select>
    <ul data-bind="foreach: items, visible:items().length >5"><!--visible test-->
        <li data-bind="text: $data"></li>
    </ul>

    <script>
        const ViewModel = function(item){
            self = this;
            self.items = ko.observableArray(item);
            self.newItem = ko.observable("");
            
            // addItem == addItems2
            self.addItem = function(){
                console.log(this)
                this.items.push(this.newItem());
                this.sortItems();
                this.newItem("");//초기화
            };
            
            self.addItem2 = addItem2;

            self.sortItems = () => {
                this.items.sort()
            }
        }

        const addItem2 = function(){
            viewModel.items.push(viewModel.newItem());
            viewModel.sortItems();
            viewModel.newItem("");//초기화
        }
        
        const viewModel = new ViewModel(['apple','banana','crab']);

        ko.applyBindings(viewModel);

    </script>