KnockoutJS - 當remove不是函數時如何從observableArray中移除一個對象？

Question

我有一個嵌套數組的數組結構。我試圖從嵌套數組中刪除一個項目，但我得到「刪除不是一個函數」的錯誤。

我已經在一個簡單的jsFiddle中重新創建了該問題 - http://jsfiddle.net/rswailes/gts5g/並粘貼了下面的代碼。

這可能是我設置觀察對象的方式不正確，但我很難過。

這是我的html：

<script id="bookGroupTemplate" type="text/html"> 
    <br/> 
    <h3><span data-bind="text: group_name"></span></h3> 
    <table> 
     <thead> 
      <tr> 
       <th>Author</th> 
       <th>Title</th> 
       <th>Genre</th> 
       <th></th> 
      </tr>   
     </thead> 
     <tbody data-bind='template: {name: "bookRowTemplate", foreach: books}'></tbody>   
    </table> 
</script> 

<script id="bookRowTemplate" type="text/html"> 
    <tr> 
     <td data-bind="text: author"></td> 
     <td data-bind="text: title"></td> 
     <td data-bind="text: genre"></td>   
    </tr> 
</script> 


<h1>Books!</h1> 

<div data-bind='template: {name: "bookGroupTemplate", foreach: bookGroups}'></div> 

<br/><br/> 
<button data-bind="click: function(){viewModel.handleButtonClick(); }">Move One From Now to Later</button> 

這是JavaScript：

var BookGroup = function(group_name, booksToAdd){ 
    var self = this; 

    this.group_name = ko.observable(group_name); 
    this.books = ko.observableArray(); 

    _.each(booksToAdd, function(book){ 
     self.books.push(ko.observable(book));    
    });   
} 

var Book = function(author, title, genre) { 
    this.author = ko.observable(author); 
    this.title = ko.observable(title); 
    this.genre = ko.observable(genre); 
} 

var PageViewModel = function() { 
    var self = this; 
    this.bookGroups = ko.observableArray(); 

    this.bookToUse = new Book("Robin Hobb", "Golden Fool", "Fantasy"); 

    this.indexAction = function() { 
     var groups = []; 

     var booksArray = []; 

     booksArray.push(this.bookToUse); 
     booksArray.push(new Book("Patrick R Something", "Name Of The Wind", "Fantasy")); 
     booksArray.push(new Book("Someone Else", "Game Of Thrones", "Fantasy")); 

     groups.push(new BookGroup("To Read Now", booksArray)); 

     booksArray = []; 

     booksArray.push(new Book("Terry Pratchett", "Color of Magic", "Discworld")); 
     booksArray.push(new Book("Terry Pratchett", "Mort", "Discworld")); 
     booksArray.push(new Book("Terry Pratchett", "Small Gods", "Discworld")); 

     groups.push(new BookGroup("To Read Later", booksArray)); 
     this.bookGroups(groups); 

    }; 

    this.handleButtonClick = function(){ 
     console.log(this.bookGroups()[0].books().length); 
     this.bookGroups()[0].books().remove(this.bookToUse); 
    }; 
}; 

viewModel = new PageViewModel(); 
ko.applyBindings(viewModel); 
viewModel.indexAction(); 

爲什麼取下不在這裏識別？這是構建模型的正確方法嗎？

任何意見:)非常感謝

Answer 1

有2個錯誤：

• 您試圖調用remove函數形式ja vascript數組而不是可觀察數組。
• 當您將它放置到observableArray時，您不需要使用observable包裝書對象。

Answer 2

你試過remove在observableArray，而不是它的內容，換句話說：

this.handleButtonClick = function(){ 
    console.log(this.bookGroups()[0].books().length); 
    this.bookGroups()[0].books.remove(this.bookToUse); 
}; 

看到Observable Arrays