1
を参照してくださいコードから項目を削除することはできませんで、配列の長さを取得することはできません。Knockout.js - （ASP MVC 3を超えるKnockout.jsを使用しています）配列
@model List<Person>
@{
ViewBag.Title = "Home Page";
}
<table>
<thead><tr>
<th>First Name</th><th>Last Name</th><th>Age</th><th>Department</th> <th></th>
</tr></thead>
<tbody data-bind="foreach: people">
<tr>
<td><input data-bind="value: FirstName" /></td>
<td><input data-bind="value: LastName"></select></td>
<td><input data-bind="value: Age"></select></td>
<td><select></select></td>
<td><a href="#" data-bind="click: $root.removePerson">Remove</a></td>
</tr>
</tbody>
<tfoot>
<tr> <th align=left colspan=4>Total number of people:</th> <th><span data-bind="text: $root.people().length"></span></th> </tr>
</tfoot>
</table>
<button data-bind="click: addPerson, enable: people().length < 5">Add another person</button>
<script type="text/javascript">
function ViewModel() {
var self = this;
self.people = ko.observableArray(ko.mapping.fromJS(@Html.Raw(new JavaScriptSerializer().Serialize(Model))));
self.addPerson = function() {
self.people.push(@Html.Raw(new JavaScriptSerializer().Serialize(new Person() { FirstName = "I am", LastName = "a new Person", Age = "0" })));
}
self.removePerson = function(person)
{
self.people.remove(person)
}
}
ko.applyBindings(new ViewModel());
</script>
public class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string Age { get; set; }
public string FullName
{
get { return FirstName + " " + LastName; }
}
}
私の質問は、なぜない人（）の長さのリターンです。 0？ （なぜ私は私の関数removePersonを使用して、配列から項目を削除することはできません？） - >
EDIT解決： をここで生成されたHTML ホームページ
<script src="/Scripts/knockout.js" type="text/javascript"></script>
<script src="/Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>
My MVC Application</h1>
</div>
<div id="logindisplay">
[ <a href="/Account/LogOn">Log On</a> ]
</div>
<div id="menucontainer">
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/Home/About">About</a></li>
</ul>
</div>
</div>
<div id="main">
<table>
<thead><tr>
<th>First Name</th><th>Last Name</th><th>Age</th><th>Department</th> <th></th>
</tr></thead>
<tbody data-bind="foreach: people">
<tr>
<td><input data-bind="value: FirstName" /></td>
<td><input data-bind="value: LastName"></select></td>
<td><input data-bind="value: Age"></select></td>
<td><select></select></td>
<td><a href="#" data-bind="click: $root.removePerson">Remove</a></td>
</tr>
</tbody>
<tfoot>
<tr> <th align=left colspan=4>Total number of people:</th> <th><span data-bind="text: $root.people().length"></span></th> </tr>
</tfoot>
</table>
<button data-bind="click: addPerson, enable: people().length < 5">Add another person</button>
<script type="text/javascript">
function ViewModel() {
var self = this;
self.people = ko.observableArray(ko.mapping.fromJS([{"FirstName":"Basti","LastName":"Wuf","Age":"28","FullName":"Basti Wuf"},{"FirstName":"Mawie","LastName":"Mew","Age":"25","FullName":"Mawie Mew"}]));
self.addPerson = function() {
self.people.push({"FirstName":"I am","LastName":"a new Person","Age":"0","FullName":"I am a new Person"});
}
self.removePerson = function(person)
{
//alert(person.FirstName);
self.people.remove(person)
}
}
ko.applyBindings(new ViewModel());
</script>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
生成されたHTMLを使用してください。 – SLaks
完了！質問が更新されました！ :) –