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