2

目标

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

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

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

有人能帮我吗？

一些细节

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

4

1 回答 1

1

在我看来，您没有充分利用 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));
于 2013-07-08T15:24:06.143 回答