1

查看代码（我在 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>
4

1 回答 1

2

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。对它（一个函数）执行 alength将返回为函数定义的参数数量（在这种情况下为 0）。

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

于 2012-04-12T13:48:16.613 回答