Question

请参阅代码（我在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从数组中删除项目？） - ＆gt;已解决

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

Answer 1

ko.mapping.fromJS给定数组时将其转换为observableArray。

所以，当你这样做时：

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()将返回内部observableArray。对它执行length（函数）将返回为函数定义的参数数量（在本例中为0）。

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

Knockout.js - 无法获取数组长度无法从数组中删除项目

1 个答案: