นี่คือคำตอบของฉันหลังจากเสร็จสิ้นโครงการขนาดใหญ่ที่มี ViewModels จำนวนมากในมุมมองเดียว
มุมมอง 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>
สำหรับมุมมองนี้ฉันกำลังสร้างแบบจำลอง 2 มุมมองสำหรับ id = container1 และ id = container2 ในไฟล์ javascript แยกต่างหากสองไฟล์
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");
}
จากนั้นหลังจาก 2 viewmodels เหล่านี้กำลังลงทะเบียนเป็น viewmodels แยกต่างหากใน 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"));
}
});
เช่นนี้คุณสามารถเพิ่มจำนวนมุมมองรุ่นใด ๆ ให้แยก divs แต่ให้แน่ใจว่าอย่าสร้างมุมมองแยกต่างหากสำหรับ div ภายใน div ที่ลงทะเบียน
masterVMไม่มีความจำเป็นสำหรับยักษ์ไม่เป็น