使用KnockoutJS在添加/删除按钮之间切换

Switch between add/remove button with KnockoutJS

本文关键字：按钮 之间 删除 KnockoutJS 添加 使用      更新时间：2023-09-26

目标

使用KnockoutJS根据可用性在添加/删除按钮之间切换。

问题

我需要在摘要中添加一个产品/项目。如果产品已经在摘要中，则将"添加按钮"更改为"删除按钮"，或者将"删除按钮"更改为"添加按钮"

直到这里，只是概念，对吧？是的，但我想我错过了问题的逻辑。

外观：

<!-- ko foreach: products -->
    <!-- ko if: isAdded -->
        <button class="btn btn-small btn-success action remove">
            <i class="icon-ok"></i>
        </button>
    <!-- /ko -->
    <!-- ko ifnot: isAdded -->
      <form action="#" data-bind="submit: add">
        <button class="btn btn-small action add">
            <i class="icon-plus"></i>
        </button>
      </form>
    <!-- /ko -->
<!-- /ko -->

正如您所看到的，有条件检查是否添加了特定的产品。如果列表为空，则不显示任何内容；如果我通过代码手动添加一些内容，就会出现两个按钮——remove和add按钮。

我制作这个CodePen是为了模拟这个场景。

有人能帮我吗？

一些细节

我可以使用jQuery；我已经做了大约三个星期了，直到现在都没有成功。

在我看来，您没有充分利用knockoutjs（但这可能只是因为我没有看到完整的应用程序）。然而，我重写了一点，并在这里举了一个例子（jsfiddle）。

function Product(name, desc) {
    var self = this;
    self.name = ko.observable(name);
    self.desc = ko.observable(desc);
    self.isAdded = ko.observable(false);
};
function SummaryViewModel(products) {
    var self = this;
    self.products = ko.observableArray(products);
    self.add = function (item) {
        var i = self.products.indexOf(item);
        self.products()[i].isAdded(true);
    };
    self.remove = function (item) {
        var i = self.products.indexOf(item);
        self.products()[i].isAdded(false);
    };
};
var p = [new Product("One", "Yep one"), new Product("Two", "nope, two")];
ko.applyBindings(new SummaryViewModel(p));
相关文章：