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

Question

目标

使用 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 -->

如您所见，有条件检查是否添加了特定产品。如果列表为空，则什么也不会出现；如果我通过代码手动添加某些内容，则会出现两个按钮——删除和添加按钮。

I made this CodePen模拟场景。

有人可以帮助我吗？

一些细节

我可以使用jQuery；我已经为此工作了大约三个星期，直到现在，还没有成功。

Answer 1

在我看来，您没有充分利用 knockoutjs(但这可能只是因为我没有看到完整的应用程序)。然而，我重写了一点并举了一个例子 here (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));