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

Question

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

Answer 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
});

​

将产品加载到 CartViewModel 中的 cartItems observableArray 中。

依赖的可观察 (ko.computed) 值 eligibleForFreebies 将确定是否应允许免费赠品。

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

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

更新：我forked your fiddle 并稍微修改了您的代码......好吧，我主要是移动了它，但我确实添加了一些功能。

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

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

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