從observableArray中刪除對象

Question

我遇到了一個問題，即刪除可觀察數組中的對象。我有一個removeItemFromQueue函數應該從隊列中刪除選定的對象。

This example表明，如果你添加了一堆的項目到隊列中，然後取出一個，它消除了所有的人：

<h3>Items:</h3> 

<ul data-bind="template: {name:'itemsTemplate', foreach: items}"></ul> 

<h3>Queue:</h3> 

<ul data-bind="template: {name:'queueTemplate', foreach: queue}"></ul> 

<script id="itemsTemplate" type="text/x-jquery-tmpl"> 
    <li> 
     <a href="#">${$data.title}</a> by <a href="#">${$data.description}</a> 
     <button data-bind="click: function() {viewModel.removeItemFromPage($data);}">Remove From Page</button> 
     <button data-bind="click: function() {viewModel.addItemToQueue($data);}">Add To Queue</button> 
    </li> 
</script> 

<script id="queueTemplate" type="text/x-jquery-tmpl"> 
    <li> 
     <a href="#">${$data.title}</a> by <a href="#">${$data.description}</a> 
     <button data-bind="click: function() {viewModel.removeItemFromQueue($data);}">Remove From Queue</button> 
    </li> 
</script> 

這是JavaScript：

function Item(title, description) { 
    this.title = ko.observable(title); 
    this.description = ko.observable(description); 
} 

var viewModel = { 
    items: ko.observableArray([ 
     new Item("one", "one description") 
    ]), 
    queue: ko.observableArray([]), 
    addItemToQueue: function (item) { 
     this.queue.push(item); 
    }, 
    removeItemFromPage: function (item) { 
     this.items.remove(item); 
    }, 
    removeItemFromQueue: function (item) { 
     this.queue.remove(item); 
    } 
}; 

ko.applyBindings(viewModel); 

我發現this workaround使用ko.toJS(item)在addItemToQueue功能：

<h3>Items:</h3> 

<ul data-bind="template: {name:'itemsTemplate', foreach: items}"></ul> 

<h3>Queue:</h3> 

<ul data-bind="template: {name:'queueTemplate', foreach: queue}"></ul> 

<script id="itemsTemplate" type="text/x-jquery-tmpl"> 
    <li> 
     <a href="#">${$data.title}</a> by <a href="#">${$data.description}</a> 
     <button data-bind="click: function() {viewModel.removeItemFromPage($data);}">Remove From Page</button> 
     <button data-bind="click: function() {viewModel.addItemToQueue($data);}">Add To Queue</button> 
    </li> 
</script> 

<script id="queueTemplate" type="text/x-jquery-tmpl"> 
    <li> 
     <a href="#">${$data.title}</a> by <a href="#">${$data.description}</a> 
     <button data-bind="click: function() {viewModel.removeItemFromQueue($data);}">Remove From Queue</button> 
    </li> 
</script> 

和這個Javascript：

function Item(title, description) { 
    this.title = ko.observable(title); 
    this.description = ko.observable(description); 
} 

var viewModel = { 
    items: ko.observableArray([ 
     new Item("one", "one description") 
    ]), 
    queue: ko.observableArray([]), 
    addItemToQueue: function (item) { 
     this.queue.push(ko.toJS(item)); 
    }, 
    removeItemFromPage: function (item) { 
     this.items.remove(item); 
    }, 
    removeItemFromQueue: function (item) { 
     this.queue.remove(item); 
    } 
}; 

ko.applyBindings(viewModel); 

是否有更簡單的方法？

另外，這裏的購物車示例看起來使用與我的第一個示例類似的代碼，但不會遇到與刪除項目相同的問題。我有點困惑。

Answer 1

您遇到的問題是您要將相同的項目多次添加到您的隊列數組中。

一個observableArray的remove函數將移除您傳遞給它的所有項目副本。

ko.toJS是一種獲取數據乾淨副本的方法。但是，如果您需要它們，您將失去任何可觀察到的事物。

否則，你可能想要做這樣的事情：

this.queue.push(new Item(item.title(), item.description())或編寫一個函數，將幫助您做出該項目的副本（傳遞一個項目，並返回一個新的項目）。