Knockout.js - 不能得到數組的長度不能從陣列中移除項目

見代碼（現在用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爲什麼我不能刪除數組中的項目？） - >解決

編輯：這裏是生成的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>

來源

2012-04-12 John Vinny Marquez

請顯示使用生成的HTML。 – SLaks 2012-04-12 13:39:21

完成！問題已更新！ :) – 2012-04-12 13:42:12

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，然後讓映射插件爲您執行此操作。

來源

2012-04-12 13:48:16

謝謝！做到了！ :) self.people = ko.mapping.fromJS（@ Html.Raw（new JavaScriptSerializer（）。Serialize（Model）））; – 2012-04-12 13:52:44

一個問題，但是如果這個表是如何獲得所有的項目，那麼如果這些項目是一個數組內的數組？（因爲我所做的全部都是data-bind =「foreach：people」，並且表格仍然生成） – 2012-04-12 13:55:25

這是一種巧合，它正在正常工作。 'foreach'綁定在將其傳遞給'template'綁定之前展開一次，並且'template'綁定執行第二次展開。 – 2012-04-12 14:12:07

Knockout.js - 不能得到數組的長度不能從陣列中移除項目

回答

相關問題