1

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

如何在我的模型中创建各种 observableArrays 之间的关系？例如，在我的模型中，我有一个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 中。

依赖的 observable (ko.computed) 值eligibleForFreebies将决定是否允许免费赠品。

当购物车不符合条件时，您甚至可能不需要从产品中删除免费赠品 - 只需检查eligibleForFreebies并从显示、发票等中包含或排除赠品。（这可能会让您省去检索的麻烦）用户添加订阅后的免费赠品，但我想这取决于您的情况。）

希望这有助于您开始使用此功能，但如果您有任何问题，请告诉我。

更新：我分叉了你的小提琴并稍微修改了你的代码......好吧，我主要是移动它，但我确实添加了一些功能。

请注意，如果您从购物车中删除订阅项目，所有免费赠品都会从购物车显示中消失——但我没有从对象中删除它们！

如果一个人添加了一种将订阅项目重新添加到购物车的方法，那么免费赠品就会重新出现。

有机会时请看一下，如果您需要我解释任何事情，请告诉我。

于 2012-08-24T17:56:18.347 回答