왜 두 번째 경고가 첫 번째보기 모델 (vm1)을 계속 표시합니까?

Question

나는 아래 코드를 가지고 있는데 두 번째 경고 대신 두 번째 경고 (vm2) 대신 첫 번째보기 모델 (vm1)을 표시하는 것이 왜 혼란 스럽습니까?

<div id="main"> 
    <div data-bind="testBinding: vm1"></div> 
    <div data-bind="testBinding: vm2"></div> 
</div> 

<script> 
    function vm1() { 
     this.firstName = "test first name" 
    } 

    function vm2() { 
     this.lastName = 'test last name'; 
    } 

    ko.bindingHandlers.testBinding = { 
     init: function(element, valueAccessor, allBindings, viewModel, 
       bindingContext) { 

       alert(JSON.stringify(bindingContext.$data)) 
     }, 
    }; 

    ko.applyBindings(new vm1(), document.getElementById('main')); 
</script> 

Answer 1

바인딩을 적용 할 때 vm1의 viewmodel을 전달하기 때문에 첫 번째 ViewModel (vm1) 만 표시됩니다.

ko.applyBindings(new vm1(), document.getElementById('main')); 

또한, ko.bindingHandlers에서 bindingContext 매개 변수는 당신에게 당신이 ko.applyBinidngs에 전달하는 뷰 모델을 얻을 것이다. 바인딩하는 동안 첫 번째 뷰 모델을 전달하므로 해당 정보 만 가져옵니다.

http://knockoutjs.com/documentation/custom-bindings.html

당신이 ko.bindingHandlers에서 v1 및 v2를 모두 얻고 싶은 경우에, 다른 뷰 모델을 생성하고 각각에 대해이 속성을 만들 수 있습니다. 당신은()`바인딩을 적용 VM1`새 VM1에서 뷰 모델을 만들기 때문에

function vm1() { 
    this.firstName = "test first name" 
} 

function vm2() { 
    this.lastName = 'test last name'; 
} 

function viewModel() { 
    this.vm1 = new vm1(); 
    this.vm2 = new vm2(); 
} 

ko.bindingHandlers.testBinding = { 
    init: function(element, valueAccessor, allBindings, viewModel, 
      bindingContext) { 

      alert(JSON.stringify(bindingContext.$data)) 
    }, 
}; 

ko.applyBindings(new viewModel(), document.getElementById('main')); 

그럼 당신은 경고 상자

{"vm1":{"firstName":"test first name"},"vm2":{"lastName":"test last name"}}