gpt4 book ai didi

javascript - 如何使用 KnockoutJS 从外部 observableArray 中删除项目

转载 作者:搜寻专家 更新时间:2023-11-01 04:57:31 25 4
gpt4 key购买 nike

目标

使用 KnockoutJS 从外部 observableArray 中删除项目。

问题

我的应用程序中有两个 observableArray。一个用于购买可用产品,另一个用于我通过单击 添加按钮 在摘要中添加的产品。

到这里为止,一切正常。但现在我需要从摘要中删除项目并更改按钮状态/样式——我不知道如何访问外部 observableArray 来执行此操作。

要了解我的问题,请查看 this jsFiddle或查看下一主题中的标记。

如您所见,当我单击添加按钮 时,产品会转到摘要。当我点击删除时——不管按钮是来自摘要还是产品——我想更改按钮状态并从摘要中删除该项目。从技术上讲,我想使用 products' observableArrayitems' observableArray 中删除项目。

我的代码

HTML:

<ul class="summary">
<!-- ko foreach: Summary.items -->
<p data-bind="text: name"></p>
<button class="btn btn-danger btn-mini remove-item">
<i class="icon-remove">×</i>
</button>
<!-- /ko -->
</ul>

<h1>What would you to buy?</h1>

<ul class="products">
<!-- ko foreach: Product.products -->
<li>
<h3 data-bind="text: name"></h3>
<p data-bind="text: desc"></p>
<!-- ko if:isAdded -->
<button data-bind="if: isAdded" class="btn btn-small btn-success action remove">
<i data-bind="click: $root.Summary.remove" class="icon-ok">Remove</i>
</button>
<!-- /ko -->
<!-- ko ifnot:isAdded -->
<form data-bind="submit: function() { $root.Summary.add($data); }">
<button data-bind="ifnot: isAdded" class="btn btn-small action add">
<i class="icon-plus">Add</i>
</button>
</form>
<!-- /ko -->
</li>
<!-- /ko -->
</ul>

JavaScript:

function Product(id, name, desc) {
var self = this;

self.id = ko.observable(id);
self.name = ko.observable(name);
self.desc = ko.observable(desc);
self.isAdded = ko.observable(false);
}

function Item(id, name) {
var self = this;

self.id = ko.observable(id);
self.name = ko.observable(name);
}

function SummaryViewModel() {
var self = this;
self.items = ko.observableArray([]);

self.add = function (item) {
self.items.push(new Item(item.id(), item.name()));

console.log(item);

item.isAdded(true);
};

self.remove = function (item) {
item.isAdded(false);
};
};

function ProductViewModel(products) {
var self = this;

self.products = ko.observableArray(products);
};

var products = [
new Product(1, "GTA V", "by Rockstar"),
new Product(2, "Watch_Dogs", "by Ubisoft")
];

ViewModel = {
Summary: new SummaryViewModel(),
Product: new ProductViewModel(products)
}

ko.applyBindings(ViewModel);

最佳答案

您可以 search for it .

您可以在购物车中查询具有相同 ID 的商品,并将其移除

self.remove = function (item) {
var inItems = self.items().filter(function(elem){
return elem.id() === item.id(); // find the item with the same id
})[0];
self.items.remove(inItems);
item.isAdded(false);
};

除非您有数十万个项目,否则这应该足够快了。只记得使用 items.remove() 这样它就会知道更新 observableArray :)

关于javascript - 如何使用 KnockoutJS 从外部 observableArray 中删除项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17557808/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com