1

jsFiddle : http://jsfiddle.net/brandondurham/g3exx/

モデル内のさまざまな observableArray 間の関係を作成するにはどうすればよいですか? たとえば、私のモデルにはcartItems配列があり、その配列の各項目にはネストされたitemFreebies配列とitemTypeプロパティがあります。顧客は、カートにサブスクリプションがある場合にのみ無料のアイテムを取得します ( "itemType" : "subscription")。そのため、そのサブスクリプションが削除された場合、できれば素敵なフェードアウト アニメーションを使用して、他のすべてのカート アイテムの景品を削除する必要があります。

これらのタイプの条件付き関係を作成する最良の方法は何ですか?

これは、モデルで使用しているオブジェクトです。

{
    "cartItems" : [
        {
            "itemName" : "Product 1",
            "itemDesc" : "Product 1 description",
            "itemType" : "subscription",
            "itemPrice" : 299,
            "itemFreebies" : false
        }, {
            "itemName" : "Product 2",
            "itemDesc" : "Product 2 description",
            "itemType" : "desktop",
            "itemPrice" : 4499,
            "itemFreebies" : [{
                "freebieName" : "Product 2 freebie",
                "freebieDesc" : "Product 2 freebie description",
                "freebieOriginalPrice" : 99
            }]
        }, {
            "itemName" : "Product 3",
            "itemDesc" : "Product 3 description",
            "itemType" : "desktop",
            "itemPrice" : 8999,
            "itemFreebies" : [{
                "freebieName" : "Product 3 freebie",
                "freebieDesc" : "Product 3 freebie description",
                "freebieOriginalPrice" : 99
            }]
        }, {
            "itemName" : "Product 4",
            "itemDesc" : "Product 4 description",
            "itemType" : "desktop",
            "itemPrice" : 99,
            "itemFreebies" : [{
                "freebieName" : "Product 4 freebie",
                "freebieDesc" : "Product 4 freebie description",
                "freebieOriginalPrice" : 99
            }]
        }, {
            "itemName" : "Product 5",
            "itemDesc" : "Product 5 description",
            "itemType" : "webfont",
            "itemPrice" : 49,
            "itemFreebies" : false
        }
    ]
}
4

1 に答える 1

1

私は次のようなことから始めます：

$(function () {
    ​var CartViewModel = {
        var self = this;

        self.cartItems = ko.observableArray([]);

        self.eligibleForFreebies = ko.computed(function() {
            return ko.utils.arrayFirst(self.cartItems(), function(cartItem) {
                // I forgot the () after itemType in the original post
                return (cartItem.itemType() === 'subscription');
            });
            // Note: ko.utils.arrayFirst will either return the item in 
            //      question, or it will return undefined or null… 
            //      I forget which, but either will result in 
            //      eligibleForFreebies evaluating to false
        });
    };

    var Product = function() {
        var self = this;

        self.itemName = ko.observable();
        self.itemDesc = ko.observable();
        self.itemType = ko.observable();
        self.itemPrice = ko.observable();
        self.itemFreebies = ko.observableArray([]);
    };

    var Freebie = function() {
        var self = this;

        self.freebieName = ko.observable();
        self.freebieDesc = ko.observable();
        self.freebieOriginalPrice = ko.observable();
    }

    ko.applyBindings(new CartViewModel());
    // load data
});

</p>

商品を CartViewModel の cartItems observableArray にロードします。

従属オブザーバブル (ko.computed) の値eligibleForFreebiesによって、景品を許可するかどうかが決まります。

カートが対象外の場合、製品から景品を削除する必要さえない可能性があります。eligibleForFreebiesディスプレイ、請求書などから景品を確認して含めたり除外したりするだけです。ユーザーがサブスクリプションを追加した後の景品ですが、それはシナリオに依存すると思います.)

これがこの問題の開始に役立つことを願っていますが、ご不明な点がありましたらお知らせください。

更新:私はあなたのフィドルをフォークし、コードを少し作り直しました...まあ、ほとんど移動しましたが、いくつかの機能を追加しました。

カートからサブスクリプション アイテムを削除すると、すべての景品がカートの表示から消えることに注意してください。ただし、オブジェクトからは削除していません。

サブスクリプション アイテムをカートに再度追加するメソッドを追加すると、景品が再び表示されます。

機会があればご覧ください。何か説明が必要な場合はお知らせください。

于 2012-08-24T17:56:18.347 に答える