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;
}
}
此行删除任何与“webfont”`itemType 匹配的根级别项目：
CartModel.cartItems.remove(function(item) { return item.itemType() == "webfont" });
第二位循环遍历所有节点cartItems并搜索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"> </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"> </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的不工作的建议？实现我想要做的更清洁的方式？
谢谢！如果您需要查看更多代码，请告诉我...