挖空.js - 无法从数组中删除项目时获取数组的长度

本文关键字：数组 获取 删除项目 挖空 js | 更新日期: 2023-09-27 18:30:57

参见代码（我在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; }
    }
}

我的问题是为什么 people（）.length 返回 0？（为什么我不能使用我的函数 removePerson 从数组中删除项目？->已解决

编辑：这是生成的 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>

挖空.js - 无法从数组中删除项目时获取数组的长度

ko.mapping.fromJS当给定一个数组时，会将其转换为可观察数组。

因此，当您这样做时：

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.people 将包装两次（observableArray 包含一个 observableArray）。

因此，self.people()将返回内部可观察数组。 对其执行length（函数）将返回为函数定义的参数数（在本例中为 0）。

基本上，您只需删除视图模型初始化代码中的外部ko.observableArray，然后让映射插件为您完成。

相关文章：