knockoutjs를 사용하여 html로 여러 javascript 파일의 요소를 바인딩하는 방법

Question

비록 이것이 기본 질문이지만 몇 가지 시도로도이를 해결할 수 없습니다. (하지만이 지역에 새로운)

나는 무엇이 필요 2 별도의 자바 스크립트 파일을 가지고 있고 그들로부터 바인딩 싶습니다.

 <table style="width: 100%;"> 
      <tr> 
       <td class="auto-style1">Time For Work: </td> 
       <td><input id="Text2" type="text" data-bind="value: TimeForWork" /></td> 
      </tr> 
      <tr> 
       <td class="auto-style1">Rest </td> 
       <td><input id="Text4" type="text" data-bind="value: Rest" /></td> 
      </tr> 
    <td class="auto-style1">Project Code </td> 
       <td ><select id="Select1" data-bind='options: Projects' style="width: 312px"></select> 
         <button data-bind="click: AddProjects">Cancel</button> 
       </td> 
       <td><input id="Text6" type="text" data-bind="value:Test" /> 
     </table> 

    <script src="Scripts/TimeRecord.js"></script> 
    <script src="Scripts/ProjectDetail.js"></script> 

내 자바 스크립트 : TimeRecord.js

var ViewModel = { 
    CheckIn: ko.observable(), 
    CheckOut: ko.observable(), 
    Lunch: ko.observable(), 
    Rest: ko.observable(), 
    WorkOnProject: ko.observable(), 
    //Projects: ko.observableArray() 
}; 


ViewModel.TimeForWork = ko.dependentObservable(function() { 
    return ViewModel.CheckIn() ? ViewModel.CheckOut() ? parseFloat(this.Lunch()) ? parseFloat(this.CheckOut()) - parseFloat(this.CheckIn()) - parseFloat(this.Lunch()) : parseFloat(this.CheckOut()) - parseFloat(this.CheckIn()) : 0 : 0; 
}, ViewModel); 

ViewModel.RemainHour = ko.dependentObservable(function() { 
    return ViewModel.TimeForWork() ? ViewModel.Rest() ? ViewModel.WorkOnProject() ? parseFloat(this.TimeForWork()) - parseFloat(this.Rest()) - parseFloat(this.WorkOnProject()) : parseFloat(this.TimeForWork()) - parseFloat(this.Rest()) : parseFloat(this.TimeForWork()) : 0 
}, ViewModel); 

ProjectDetail.js 여기에

var projectLine = function() { 
    var self = this; 
    //self.RemainHour = ko.observable(); 
    self.Test = "abc"; 
    self.Projects = ko.observableArray(); 

    self.AddProjects = function() { 
     alert('abc'); 
    } 
} 
ko.applyBindings(new projectLine()); 

값은 내가 예상대로 구속력 TimeRecord.js. 그러나 ProjectDetail 값은 바인딩되지 않습니다. 심지어 self.Test 값이 표시되지 않습니다. 내가 뭘 잘못 했니?

Answer 1

이 경우 다른보기 모델을 만들 수 있으며 해당보기 모델을 사용하면 다른보기 모델 기능에 액세스 할 수 있습니다.

var ModelHome={ 
    TimeRecord:ViewModel , 
    Project :projectLine , 

}; 

ko.applyBindings(ModelHome); 

Answer 2

ko.applyBindings는 섹션 당 한 번만 호출 할 수 있습니다. 두 번째 매개 변수를 전달하지 않으면 섹션이 전체 페이지입니다.

이렇게하십시오.

<div id="one"> 
    <input data-bind="value: name" /> 
</div> 

<div id="two"> 
    <input data-bind="value: name" /> 
</div> 

<script type="text/javascript"> 
    var viewModelA = { 
    name: ko.observable("Anurag") 
    }; 

    var viewModelB = { 
    name: ko.observable("Chaurasia") 
    }; 

    ko.applyBindings(viewModelA, document.getElementById("one")); 
    ko.applyBindings(viewModelB, document.getElementById("two")); 
</script> 

도움이 될 것입니다.