Javascript 在Knockout.js模型中创建项目之间的关系

jsFiddle：

如何在模型中的各种ObservalArrays之间创建关系？例如，在我的模型中，我有一个

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

---

我将从以下内容开始：

$(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
});

​

将产品加载到CartViewModel中的cartItems阵列中

免费赠品的相关可观察值（ko.计算值）

eligibleForFreebies

将决定是否允许免费赠品

当购物车不符合条件时，您甚至可能不需要从产品中删除免费赠品–只需选中

可删除免费赠品

，并将免费赠品从展示、发票等中包括或排除即可。（这可能会让您省去在用户添加订阅后检索免费赠品的麻烦，但我想这取决于您的场景。）

希望这有助于你开始这一点，但让我知道如果你有任何问题

更新：我对您的代码做了一些修改和修改……嗯，我主要是将其移动了一下，但我确实添加了一些功能

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

如果用户添加了一种方法，将订阅项目重新添加到购物车中，免费赠品将重新出现

---

如果有机会，请看一看，如果您想让我解释什么，请告诉我。

我将从以下内容开始：

$(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
});

​

将产品加载到CartViewModel中的cartItems阵列中

免费赠品的相关可观察值（ko.计算值）

eligibleForFreebies

将决定是否允许免费赠品

当购物车不符合条件时，您甚至可能不需要从产品中删除免费赠品–只需选中

可删除免费赠品

，并将免费赠品从展示、发票等中包括或排除即可。（这可能会让您省去在用户添加订阅后检索免费赠品的麻烦，但我想这取决于您的场景。）

希望这有助于你开始这一点，但让我知道如果你有任何问题

更新：我对您的代码做了一些修改和修改……嗯，我主要是将其移动了一下，但我确实添加了一些功能

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

如果用户添加了一种方法，将订阅项目重新添加到购物车中，免费赠品将重新出现

---

有机会的时候，请看一看，如果你想让我解释什么，请告诉我。

Hiya Jimmy。非常感谢你的建议。我不太清楚如何使用

Products

和

Freebie

对象从

cartItems

数组中添加项目。这是我现有代码的一部分：Hi Jimmy、 非常感谢你把这些放在一起。一个问题：你知道为什么免费赠品上会出现

beforeRemoveAnimation

吗？因此，当订阅被删除时，我确实需要删除这些免费赠品对象，因为当用户去签出时，我会将此JSON发送给服务。不过，当重新添加订阅时，这是安全的在另一页上。我不必担心在这里捕获它。

beforeRemoveAnimation

是免费赠品，只是因为你的小提琴中有

beforeRemove

关于

itemFreebies

的内容，也就是说，只是你所拥有的内容的翻译：-）哎呀…关于删除动画之前的

的评论缺少一些文本。我在问为什么动画不适用于免费赠品。它只适用于根级别的元素。你好，吉米。非常感谢你的建议。我不完全清楚如何使用
产品从
cartItems
数组添加项目cts
和
Freebie
对象。这是我现有代码的一部分：嗨，吉米。非常感谢你把它们放在一起。一个问题：你知道为什么免费赠品上的
在删除之前
吗？所以当订阅被删除时，我确实需要删除这些免费赠品对象，因为我将把这个JSON发送给服务器当用户去签出时。但是，这是安全的，因为在另一个页面上会重新添加订阅。我不必担心在这里捕获订阅。
beforeRemoveAnimation
是免费赠品，只是因为你的小提琴中有
beforeRemove
on
itemFreebies
，也就是说，只是你所拥有的东西的翻译：-）哎呀。。。删除动画之前有关
的注释
缺少一些文本。我在问为什么动画不在免费赠品上工作。它只对根级别的元素起作用。