하나의 ViewModel로 각보기를 처리하기에는 응용 프로그램이 너무 커지고 있다고 생각합니다.
그래서 여러 ViewModel을 만들어 단일 View에로드하는 것이 얼마나 어려운지 궁금합니다. 또한 X ViewModel 데이터를 Y ViewModel 데이터로 전달할 수 있어야 개별 ViewModel이 서로 통신하거나 최소한 서로를 인식 할 수 있어야합니다.
예를 들어 <select>드롭 다운이 있습니다. 선택 드롭 다운에는 선택된 상태가있어 선택한 항목의 ID를 <select>별도의 ViewModel에서 다른 Ajax 호출 로 전달할 수 있습니다 ....
단일 View에서 수많은 ViewModel을 다루는 데 대한 모든 점은 높이 평가했습니다. :)
답변:
모두 동일한 페이지에 있어야하는 경우이를 수행하는 한 가지 쉬운 방법은 다른 뷰 모델의 배열 (또는 속성 목록)을 포함하는 마스터 뷰 모델을 갖는 것입니다.
masterVM = {
vmA : new VmA(),
vmB : new VmB(),
vmC : new VmC(),
}그런 다음 masterVM필요한 경우 페이지 자체에 대한 다른 속성을 가질 수 있습니다. 이 상황에서을 통해 릴레이 masterVM하거나 $parent/ $rootin 바인딩 또는 다른 사용자 정의 옵션을 사용할 수 있으므로 뷰 모델 간의 통신은 어렵지 않습니다 .
with:있으므로 반복하지 않습니다
녹아웃은 이제 여러 모델 바인딩을 지원합니다. 이 ko.applyBindings()메소드는 선택적 매개 변수 (요소 및 바인딩이 활성화 될 하위 항목)를 사용합니다.
예를 들면 다음과 같습니다.
ko.applyBindings(myViewModel, document.getElementById('someElementId'))이렇게하면 ID someElementId및 해당 하위 항목이있는 요소로 활성화가 제한 됩니다.
자세한 내용은 설명서 를 참조하십시오.
[0]과 같이 jQuery 객체 대신 실제 DOM 요소를 지정 하도록 추가 해야합니다.ko.applyBindings(myViewModel, $('#someElementId')[0])
이것은 단일 뷰에서 많은 ViewModel이있는 매우 큰 프로젝트를 완료 한 후의 대답입니다.
HTML보기
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="container1">
<ul>
<li >Container1 item</li>
<!-- ko foreach: myItems -->
<li>Item <span data-bind="text: $data"></span></li>
<!-- /ko -->
</ul>
</div>
<div id="container2">
<ul>
<li >Container2 item</li>
<!-- ko foreach: myItems -->
<li>Item <span data-bind="text: $data"></span></li>
<!-- /ko -->
</ul>
</div>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/knockout-3.0.0.js"></script>
<script src="js/DataFunction.js"></script>
<script src="js/Container1ViewModel.js"></script>
<script src="js/Container2ViewModel.js"></script>
</body>
</html>이보기를 위해 두 개의 별도 자바 스크립트 파일에서 id = container1 및 id = container2에 대한 두 가지보기 모델을 만들고 있습니다.
Container1ViewModel.js
function Container1ViewModel()
{
var self = this;
self.myItems = ko.observableArray();
self.myItems.push("ABC");
self.myItems.push("CDE");
} Container2ViewModel.js
function Container2ViewModel() {
var self = this;
self.myItems = ko.observableArray();
self.myItems.push("XYZ");
self.myItems.push("PQR");
}그런 다음이 두 개의 뷰 모델이 DataFunction.js에 별도의 뷰 모델로 등록 된 후
var container1VM;
var container2VM;
$(document).ready(function() {
if ($.isEmptyObject(container1VM)) {
container1VM = new Container1ViewModel();
ko.applyBindings(container1VM, document.getElementById("container1"));
}
if ($.isEmptyObject(container2VM)) {
container2VM = new Container2ViewModel();
ko.applyBindings(container2VM, document.getElementById("container2"));
}
});이와 같이 별도의 div에 여러 개의 뷰 모델을 추가 할 수 있습니다. 그러나 등록 된 div 안에 div에 대해 별도의 뷰 모델을 만들지 마십시오.
녹아웃 JS에 대한 MultiModels에게 플러그인을 확인 - https://github.com/sergun/Knockout-MultiModels
이를 달성하기 위해 컴포넌트를 사용합니다. ( http://knockoutjs.com/documentation/component-overview.html )
예를 들어, 개발중인이 컴포넌트 라이브러리가 있습니다 : https://github.com/EDMdesigner/knobjs
코드를 파헤 치면 예를 들어 노브 버튼 구성 요소를 여러 곳에서 재사용한다는 것을 알 수 있습니다.
masterVM.