0

1. ゴール

JavaScript、KnockoutJS、または jQuery を使用してリスト内の属性を検索します。

2. シナリオ

KnockoutJS を使用してその UIをダイナマイズするストア アプリケーションがあります。

3. 問題

ストアのショッピング カートに追加できる各製品には追加ボタンがありますが、製品がまだショッピング カートにない場合にのみ使用できます。

ショッピング カートを反復処理して、利用可能な製品リストの各製品が既にそこにあるかどうかを確認する必要があります。

4.少し前のコード...

リストに追加する利用可能な製品の各製品は、このフラグメントを使用してボタンを切り替えています。

<!-- ko if: Summary.hasItem($element) -->
    <button class="btn btn-small action remove">
        <i class="icon-minus"></i>
    </button>
<!-- /ko -->
<!-- ko ifnot: Summary.hasItem($element) -->
    <button class="btn btn-small action add">
        <i class="icon-plus"></i>
    </button>
<!-- /ko -->

ご覧のとおり、このhasItem()関数を使用して商品が既にショッピング カートに入っているかどうかを確認していますが、これを実装する必要があり、これを行うにはあなたの助けが必要です。

5. すでに試したこと

以下に示すように、ショッピング カート内の製品を 1 つずつチェックするループを作成しようとしました...

self.hasItem = function (element) {
    var $productId = $(element).closest("li").data("productid"),
        products = self.products();

    if (products.length > 0) {
        for (var product in products) {
            if (products[product].id() == $productId) {
                return true;
            } else {
                return false;
            }
        }
    }
};

...問題が発生しました! 次の章に続きます。

6.何かがうまくいかない

私の脳では論理計算ができませんが、ボタンごとにこのループがあるため、一方が実行されたときにもう一方が実行されなかったり、リストに項目がある場合にもう一方が追加されなかったりするようです。

7.遊び場

これで遊ぼう！

8. 聞きたいことがあります...

私のループ/ロジックは正しいですか?

4

3 に答える 3

1

あなたの場合、これはうまくいきます：

self.hasItem = function (element) {
    var $productId = $(element).closest("li").data("productid"),
        products = self.products();

     return ko.utils.arrayFirst(products, function(p){
         return (p.id() == $productId);               
     }) != null;
}

ko.utils.arrayFirstは、指定された述語に一致する最初のアイテムを返します。それ以外の場合は null。

于 2013-07-05T14:50:38.030 に答える
1

「hasItem」を呼び出す代わりに、Product オブジェクト内に「isSelected」のようなものを含める必要があります。

次に、製品をループして、「isSelected」でない場合は (疑似コード) と言ってから、追加ボタンを表示できます。この追加ボタンをクリックすると、Product オブジェクトの「isSelected」プロパティが true に設定されます。

可能であれば、Knockout JS が自己完結型のオブジェクトで動作するようにします。

そのような：

<!-- ko foreach: Products -->
   <!-- ko if: IsSelected --> // Automatically inherited from parent
    <button class="btn btn-small action remove">
        <i class="icon-minus"></i>
    </button>
    <!-- /ko -->
<-- /ko -->
于 2013-07-05T14:42:28.957 に答える