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は2回ラップされます（observableArrayにはobservableArrayが含まれます）。

したがって、self.people()内部のobservableArrayを返します。そのlength上で（関数）を実行すると、関数に定義された引数の数（この場合は0）が返されます。

ko.observableArray基本的に、ビューモデル初期化コードのアウターを削除して、マッピングプラグインに任せることができます。

于 2012-04-12T13:48:16.613 に答える