条件删除根级和嵌套observableArrays在Knockout.js中的应用

Question

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

我正在处理购物车的设置，并在我的模型中使用以下JSON数据：

{
    "cartItems" : [
        {
            "itemName" : "Product 1",
            "itemDesc" : "One year subscription through 14 November 2013",
            "itemType" : "subscription",
            "itemPrice" : 299,
            "itemFreebies" : false
        }, {
            "itemName" : "Product 2",
            "itemDesc" : "OpenType format",
            "itemType" : "desktop",
            "itemPrice" : 4499,
            "itemFreebies" : [{
                "freebieName" : "Product 2-a",
                "freebieDesc" : "included with your workstation license",
                "freebieOriginalPrice" : 99
            }]
        }, {
            "itemName" : "Product 3",
            "itemDesc" : "OpenType format",
            "itemType" : "desktop",
            "itemPrice" : 8999,
            "itemFreebies" : [{
                "freebieName" : "Product 3-a",
                "freebieDesc" : "included with your workstation license",
                "freebieOriginalPrice" : 99
            }]
        }, {
            "itemName" : "Product 4",
            "itemDesc" : "OpenType format",
            "itemType" : "desktop",
            "itemPrice" : 99,
            "itemFreebies" : [{
                "freebieName" : "Product 4-a",
                "freebieDesc" : "included with your workstation license",
                "freebieOriginalPrice" : 99
            }]
        }, {
            "itemName" : "Product 5",
            "itemDesc" : "",
            "itemType" : "webfont",
            "itemPrice" : 49,
            "itemFreebies" : false
        }, {
            "itemName" : "Product 6",
            "itemDesc" : "for use with Cloud.typography",
            "itemType" : "webfont",
            "itemPrice" : 99,
            "itemFreebies" : false
        }
    ]
}

购物车中的某些类型的项目之间有一些关系。例如，这个JSON中的第一项是itemType“订阅”。当用户在购物车中订阅时，他们会得到一些免费的东西，这取决于购物车中的其他内容(因此在某些项中使用了嵌套的itemFreebies数组)。它们还可以添加与此订阅相关的特定类型的项(即"webfonts")。因此，当用户从他们的购物车中删除订阅时，所有这些免费项目和网页字体都必须被删除。下面是我目前用于执行此操作的函数：

removeRelatives: function (itemType) {
    var siblings = CartModel.cartItems();
    switch (itemType) {
        case "subscription":
            CartModel.cartItems.remove(function(item) { return item.itemType() == "webfont" });
            $.each(CartModel.cartItems(), function(index, sib) {
                if (sib.itemFreebies) {
                    sib.itemFreebies.removeAll();
                }
            });
        break;
    }
}

这一行移除与“web字体”``itemType匹配的任何根级项：

CartModel.cartItems.remove(function(item) { return item.itemType() == "webfont" });

第二个比特循环遍历所有cartItems并搜索不为false的itemFreebies节点并删除它：

$.each(CartModel.cartItems(), function(index, sib) {
    if (sib.itemFreebies) {
        sib.itemFreebies.removeAll();
    }
});

这是我不确定的第二步。它起作用了，但我怀疑这不是最干净的方法。此外，我为那些嵌套的beforeRemove提供的itemFreebies动画也无法工作。当移除时，它们就会从屏幕上消失。

下面是HTML方面的内容：

<ul id="cart-contents" data-bind="template: { name: 'cart-item-template', foreach: cartItems, beforeRemove: CartPackage.beforeRemove }">
    </ul>
<div id="running-totals">
    <div class="totals" data-bind="visible: cartItems().length > 0">
        <div><strong>Subtotal</strong></div>
        <div><span class="denomination">USD</span>  <strong id="subtotal"><span data-bind="formatUSD: CartPackage.totalSurcharge()"></span></strong></div>
    </div>
    <div class="empty-cart">There are currently no items in your shopping cart.</div>
</div>
<div class="call-to-action" data-bind="visible: cartItems().length > 0">
    <div class="split">
        <div class="messages">&nbsp;</div>
        <div class="actions">
            <button class="cancel">Continue Shopping</button>
            <button class="action">Checkout</button>
        </div>
    </div>
</div>
<input type="hidden" value="" data-bind="value: cartItems().length">
<script type="text/html" id="cart-item-template">
    <li>
        <button class="delete-item">Delete</button>
        <ul>
            <li data-bind="attr: {'class': itemType}">
                <div class="details">
                    <h5><strong data-bind="text: itemName">Product Name</strong><!-- ko if: itemType() === 'desktop' --> Desktop fonts<!-- /ko --><!-- ko if: itemType() === 'webfont' --> Webfonts<!-- /ko --></h5>
                    <p data-bind="text: itemDesc">One year subscription through 14 November 2013</p>
                </div>
                <div class="quantity">
                    <!-- ko if: itemType() === "subscription" --><select data-bind='options: SubscriptionData, optionsText: "name", optionsValue: "price", value: itemPrice'></select><!-- /ko -->
                    <!-- ko if: itemType() === "desktop" || itemType() === "webfont" --><select data-bind='options: DesktopData, optionsText: "name", optionsValue: "price", value: itemPrice'></select><!-- /ko -->
                </div>
                <div class="cost" data-bind="formatUSD: itemPrice">$ 0</div>
            </li>
            <!-- ko if: itemFreebies -->
            <!-- ko foreach: itemFreebies, beforeRemove: CartPackage.beforeRemove -->
            <li class="webfont">
                <div class="details">
                    <h5><strong data-bind="text: freebieName">Product</strong> Webfonts</h5>
                    <p data-bind="text: freebieDesc">Included with your workstation license</p>
                </div>
                <div class="quantity">&nbsp;</div>
                <div class="cost">
                    <span class="original-price" data-bind="formatUSD: freebieOriginalPrice">$ 49.00</span>  <span class="free">FREE!</span>
                </div>
            </li>
            <!-- /ko -->
            <!-- /ko -->
        </ul>
    </li>
</script>

关于为什么我的beforeRemove不起作用的建议？更干净的方法来实现我想做的事？

谢谢!如果你需要看到更多的代码..。

Answer 1

对于beforeRemove动画，它看起来只是我在上面的注释中列出的语法问题。

从我现在所知道的情况来看，http://jsfiddle.net/rniemeyer/g3exx/3/似乎运行得很好。

对于删除免费代码的代码，可以将其简化为：

$.each(CartModel.cartItems(), function(index, sib) {
    sib.itemFreebies([]);
});

对于关系部分，我不认为有一种简单的方法可以比你现在所做的更好地模拟它。其中一个想法是在您的根视图模型上创建可计算的可观测值，该模型代表所有的总体概念，如hasSubscription。然后，如果该值发生变化，每个购物车项都可以订阅hasSubscription并删除它们自己的空闲代码。它至少会在订阅购物车项目和其他购物车项目之间添加一些间接。但是，它会增加映射项目的方式的复杂性。

如果你想追求这样的选择，我很乐意提供进一步的帮助。