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

ご覧のとおり、特定の製品が追加されているかどうかを確認するための条件があります。リストが空の場合、何も表示されません。コードで何かを手動で追加すると、削除ボタンと追加ボタンの 2 つのボタンが表示されます。

シナリオをシミュレートするために、この CodePen を作成しました。

誰かが私を助けることができますか？

いくつかの詳細

jQuery を使用できます。私はすでに約 3 週間取り組んでいますが、今のところ成功していません。

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 に答える