在以下代码中发现未捕获的错误。绑定只应用一次，直到它显示无法多次应用绑定...是淘汰版的问题吗？可以在立即调用函数中编写以下代码...
var DummyContact = [
{
"ContactID": 1,
"FirstName": "Nimesh",
"LastName": "Vaghasiya"
},
{
"ContactID": 2,
"FirstName": "John",
"LastName": "Cena"
}
];
var ContactViewModel = function () {
var self = this;
var url = "/Contacts/GetAllContacts";
//var refresh = function () {
// $.getJSON(url, {}, function (data) {
// self.Contacts(data);
// });
//};
var refresh = function () {
self.Contacts(DummyContact);
};
// public data properties
self.Contacts = ko.observableArray([]);
refresh();
self.createContact = function () {
window.location.href = '/Contacts/CreateEdit/0';
};
self.editContact = function (Contact) {
window.location.href = '/Contacts/CreateEdit/' + Contact.ContactID;
};
self.removeContact = function (Contact) {
if (confirm("Are you sure you want to delete this profile?")) {
self.Contacts.remove(Contact);
}
};
};
ko.applyBindings(new ContactViewModel());
HTML 代码是：
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<html>
<body>
<input type="button" class="btn btn-small btn-primary" value="New Contact" data-bind="click:$root.createContact" />
<hr />
<table class="table table-striped table-bordered table-condensed">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th></th>
</tr>
<tbody data-bind="foreach: Contacts">
<tr>
<td class="name"><a data-bind="text: FirstName, click:$parent.editContact"></a></td>
<td data-bind="text: LastName"></td>
<td>
<button class="btn btn-mini btn-danger" data-bind="click:$parent.removeContact">remove</button></td>
</tr>
</tbody>
</table>
</body>
</html>
<script src="~/Scripts/Contact.js"></script>
//布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/jquery.ui.all.css")
@Styles.Render("~/Content/themes/base/jquery.ui.dialog.css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/knockout")
</head>
<body>
<header>
<div class="container content-wrapper">
<div class="float-left">
<p class="site-title">
<a href="@Url.Action("Index", "Home")">
<img src="~/Content/themes/base/images/address-book.png" style="margin-left: -5px" /></a>
</p>
</div>
<div class="float-right">
<section id="login">
@Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
@if (Request.IsAuthenticated)
{
<li>@Html.ActionLink("Groups", "Index", "Groups")</li>
<li>@Html.ActionLink("Contacts", "Index1", "Contacts")</li>
<li>@Html.ActionLink("Address", "Index", "Address")</li>
<li>@Html.ActionLink("Email", "Index", "Emails")</li>
<li>@Html.ActionLink("Numbers", "Index", "Numbers")</li>
}
<li>@Html.ActionLink("Contact Us", "Contact", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix container">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper container">
<div class="float-left">
<p>© @DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
@Scripts.Render("~/bundles/jquery")
@Styles.Render("~/Content/bootstrap/bootstrap.css")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/Scripts/modaldialog.js")
@RenderSection("scripts", required: false)
</body>
<script type="text/javascript">
(function () {
$("#body").show({ effect: "drop", direction: "down", distance: 200, duration: 1000 })
})();
</script>
</html>
更改您的 html，如下所示：
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<html>
<body>
<div id="unique-view-data">
<input type="button" class="btn btn-small btn-primary" value="New Contact" data-bind="click:$root.createContact" />
<hr />
<table class="table table-striped table-bordered table-condensed">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th></th>
</tr>
<tbody data-bind="foreach: Contacts">
<tr>
<td class="name"><a data-bind="text: FirstName, click:$parent.editContact"></a></td>
<td data-bind="text: LastName"></td>
<td>
<button class="btn btn-mini btn-danger" data-bind="click:$parent.removeContact">remove</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script src="~/Scripts/Contact.js"></script>
并将 javascript 中的最后一行更改为：
ko.applyBindings(new ContactViewModel(), document.getElementById("unique-view-data"));
这会告诉 KNOCKOUT 仅将绑定应用于第二个参数中指定的 DOM 元素。
我怀疑可能还有其他视图模型也在尝试应用绑定。如果是这种情况，请相应地更新其他视图模型。