从 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);

我在addItemToQueue 函数中使用ko.toJS(item) 找到了this workaround：

<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()) 或编写一个函数来帮助您制作项目的副本（传入一个项目并返回一个新项目）。