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

Creating relationships between items in a Knockout.js model

本文关键字：之间 关系 创建 Knockout js 模型      更新时间：2023-09-26

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

如何在模型中的各种ObservableArray之间创建关系例如，在我的模型中，我有一个cartItems数组，该数组中的每个项都有一个嵌套的itemFreebies数组和一个itemType属性。客户只有在购物车（"itemType" : "subscription"）中有订阅时才能获得免费商品，因此，当订阅被删除时，我需要删除所有其他购物车商品的免费赠品，最好是带有漂亮的fadeOut动画。

创建这些类型的条件关系的最佳方法是什么？

这是我在模型中使用的对象：

{
    "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 observableArray中。

依赖的可观察（ko计算）值eligibleForFreebies将决定是否应该允许免费赠品。

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

希望这能帮助你开始这项工作，但如果你有任何问题，请告诉我。

更新：我分叉了你的小提琴，重新编写了你的代码。。。嗯，我大部分时间都在移动它，但我确实添加了一些功能。

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

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

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

相关文章：