从observableArray中删除对象

Question

我遇到了删除可观察数组中的对象的问题.我有一个removeItemFromQueue应该从队列中删除所选对象的函数.

这个例子表明,如果你添加了一堆的项目到队列中,然后取出一个,它消除了所有的人:

<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功能:

<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

您遇到的问题是您正在多次向队列数组添加相同的项目.

removeobservableArray 的功能将删除您传递给它的项目的所有副本.

ko.toJS是获取数据干净副本的一种方法.但是,如果需要,您将丢失任何可观察量.

否则,您可能想要执行以下操作:

this.queue.push(new Item(item.title(), item.description()) 或编写一个函数,帮助您制作项目的副本(传入一个项目并返回一个新项目).