我正在尝试在knockout js中使用多个视图模型和单个视图来减少复杂性。但它只与一种观点有关。我也在使用kendo UI小部件。这是我写的代码：
$(document).ready(function() {
$("#menu").kendoMenu();
$("#grid").kendoGrid();
$("#datepicker").kendoDatePicker();
$("#closingDetails").click(function() {
$("#myDiv").load("closingDetails.html");
});
$("#loanFees").click(function() {
$("#myDiv").load("loanFees.html");
});
$("#borrower").click(function() {
$("#myDiv").load("borrower.html");
});
function AppViewModel() {
var self = this;
self.isOpen = ko.observable(false);
self.tipText = "self is a window tooltip!";
self.resetMe = function() {
}
}
function closingDetailsViewModel() {
var self = this;
self.fullname = ko.observable("");
self.address = ko.observable("");
self.zip = ko.observable("");
self.settlementDate = ko.observable();
self.cityList = ko.observableArray(["bangalore", "noida", "pune", "chennai"]);
self.city = ko.observable();
}
ko.applyBindings(new AppViewModel());
ko.applyBindings(new closingDetailsViewModel());
});
我的main.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<header>
<h1>Welcome Customer</h1>
<button type="button" data-bind="click: isOpen" class="css3button">Logout</button>
<div id ="window" data-bind="kendoWindow: { isOpen: isOpen, visible: false }">
<p data-bind="kendoTooltip: { content: tipText }"> Window Content</p>
</div>
<nav id="example" class="k-content">
<div id="mortgage">
<ul id="menu">
<li>
Closing Info
<ul>
<li id="closingDetails">
<a > Closing Details</a>
</li>
<li >
Related Parties
</li>
</ul>
</li>
<li>
Loan Info
<ul>
<li id="loanFees">
Loan fees
</li>
</ul>
</nav>
</header>
<section id= "myDiv">
</section>
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="js/knockout-2.2.1.js"></script>
<script src="js/knockout-kendo.min.js"></script>
<script src="viewModel/script.js"></script>
</body>
</html>
这是closingDetails.html代码：
<html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<section id="closingDetailsDiv" class="forms">
<h3>Closing Details</h3>
<ul>
<li>
<label for="fullname" class="required">Your Name : </label>
<input data-bind="value: fullname" type="text" id="fullname" name="fullname" class="k-textbox" placeholder="Full name" required validationMessage="Please enter {0}" ></input>
</li>
<li>
<label for="address" class="required">Address :</label>
<input data-bind="value: address" type="text" id="address" name="address" class="k-textbox" placeholder="Address" required validationMessage="Please enter {0}" />
</li>
<li>
<label for="zip" class="required">Zip :</label>
<input data-bind="value: zip" type="zip" id="zip" name="zip" class="k-textbox" pattern="\d{6}" placeholder="Please enter a six digit zip code" required validationMessage="Please enter a six digit zip code"/>
</li>
<li>
<label for="city">City :</label>
<input data-bind="kendoDropDownList: { data: cityList, value: city }" />
<span class="k-invalid-msg" data-for="city"></span>
</li>
<li>
<div>
<label for="settlementDate" >Settlement date :</label>
<input id="settlementDate" data-bind="kendoDatePicker: settlementDate" value="10/10/2011" style="width:150px;" />
</div>
</li>
</ul>
<br>
<hr style="color: #505050 ; background: #505050 ; width: 100%; height: 2px;">
<br>
<ul>
<li>Full name: <strong data-bind="text: fullname"></strong></li>
<li>Address: <strong data-bind="text: address"></strong></li>
<li>Zip: <strong data-bind="text: zip"></strong></li>
<li>Settlement date: <strong data-bind="text: settlementDate"></strong></li>
<li>City: <strong data-bind="text: city"> </strong></li>
</ul>
</section>
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="js/knockout-2.2.1.js"></script>
<script src="js/knockout-kendo.min.js"></script>
<script src="viewModel/script.js"></script>
<script src="viewModel/closingDetailsScript.js"></script>
</body>
</html>
只有AppViewModel值有效。有人能帮我吗？提前谢谢
答案 0 :(得分：1)
从关闭details.html中删除script.js。这应该有用。
答案 1 :(得分：0)
对于同一页面上的多个视图模型，指定要绑定的元素是避免问题的最佳方法。
ko.applyBindings(new AppViewModel(), document.getElementById('aContainer'));
ko.applyBindings(new closingDetailsViewModel(), document.getElementById('anotherContainer'));