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

我在ko.toJS(item)函数中使用addItemToQueue找到了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())或编写一个可以帮助您复制该项目的函数（传入一个项目并返回一个新项目）。

从observableArray中删除对象

1 个答案: