淘汰賽JS購物車練習

Question

我正在學習淘汰賽js，並已開始構建簡單的購物車。

該購物車基本上要求用戶從下拉列表中選擇類別，然后在第二個下拉列表中填充產品。

當用戶選擇產品時，將顯示產品信息，即名稱/價格/數量/總計。 “添加項目”按鈕也是可見的。

數量數據是一本教科書，用戶可以在其中增加該值。 如果用戶增加數量值，則總價值將計算新的總和，即（價格*數量）。

當用戶單擊添加項目按鈕時，產品ID，名稱，數量和總數將存儲並顯示在相鄰的div（即購物車列表）中（ID除外）。

我遇到的問題是，當某商品位於數量為1的購物車中，並且我想向數量為2的購物車中添加新商品時，購物車中的數量值也更改為2。這些值應保持為1時，購物車中的總價值也將與新商品的總價值匹配。

這是代碼：

<div id="exp2">
    <div>
        <span>
            <select id="ddlCat" data-bind="options: lstCategories, optionsText: 'name',
            optionsValue: 'id', optionsCaption: 'Select Category...',
            value: selectedCate"></select>
        </span>
        <span data-bind="visible: lstProducts().length > 0">
            <select id="ddlProd" data-bind="options: lstProducts, optionsText: 'name',
            optionsValue: 'id',  optionsCaption: 'Select Product...',
            value: selectedProdId"></select>
        </span>
        <span data-bind="with: selectedProd()">
            Price: £<span id="pPrice" data-bind="text: price"></span>, &nbsp;
            Qty <input type="text" id="pQty" data-bind="value: quantity" style="width:30px;"
                       placeholder="" required />
            SubTotal: £<span data-bind="text: itemTotal()"></span>
            <span><button id="btnAdd" class="btnAdd" data-bind="click: addItem">Add to cart</button></span>
        </span>
    </div>
    <div>
        <h3>Items In Cart</h3>
        <ul id="lstCart" data-bind="foreach: cart">
            <li>
                Name: <span data-bind="text: name"></span>&nbsp;
                Qty: <span data-bind="text: qty"></span>&nbsp;
                Item Total: £<span data-bind="text: itemTotal"></span>&nbsp;
            </li>
        </ul>
        Sub Total: £<span data-bind="text: subTotal()"></span>
    </div>
  </div>

Java腳本

        var categories = [];
        var products = [];
        var cartLines = [];

        $.ajax({
            url: '../KnockoutTut/page5GetCat',
            type: "GET", cache: false, async: false,
            contentType: "application/json; charset=utf-8",
            dataType: "json", traditional: true,
            success: function (data) {
                //alert('Process Successful');
                for (var i = 0; i < data.length; i++) {
                    var id = data[i].id; var name = data[i].name;
                    //var nCat = new Category(id, name);
                    categories.push( new Category(id,name));
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                //alert("Error")
                alert(jqXHR.status + "," + jqXHR.responseText + "," + errorThrown);
            }
        });

        function getProd(catId) {
            products = [];
            var value = { 'value': catId };
            var json = JSON.stringify(value);
            $.ajax({
                url: '../KnockoutTut/page5GetProd',
                type: "POST", data: json, cache: false, async: false,
                contentType: "application/json; charset=utf-8",
                dataType: "json", traditional: true,
                success: function (data) {
                    //alert('Process Successful');
                    for (var i = 0; i < data.length; i++) {
                        var id = data[i].id; var name = data[i].name;
                        var price = data[i].price; var qty = data[i].qty;
                        products.push(new Product(id, name, price, 1));
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    //alert("Error")
                    alert(jqXHR.status + "," + jqXHR.responseText + "," + errorThrown);
                }
            });
        }

        function Category(id, name) {
            this.id = id;
            this.name = name;
        };

        function Item(id, name, qty, itemTotal) {
            this.id = id;
            this.name = name;
            this.qty = qty;
            this.itemTotal = itemTotal;
        };

        function Product(id, name, price, qty) {
            this.id = id;
            this.name = name;
            this.price = price;
            this.qty = qty;
        };

        function viewModel() {

            var self = this;
            self.lstCategories = ko.observableArray(categories);
            self.lstProducts = ko.observableArray([]);
            self.cart = ko.observableArray([]);
            self.selectedCate = ko.observable();
            self.selectedProdId = ko.observable();
            self.selectedProd = ko.observable();
            self.quantity = ko.observable(1);
            self.catQty = ko.observable();

            self.itemTotal = ko.pureComputed(function () {
                return self.selectedProd() ? self.selectedProd().price * parseInt("0" + self.quantity(), 10) : 0;
            });

            self.subTotal = ko.pureComputed(function () {
                var total = 0;
                $.each(self.cart(), function () { total += this.itemTotal() })
                return total;
            });

            self.selectedCate.subscribe(function (pCatId) {
                var catId = pCatId;
                if ($.isNumeric(catId)) {
                    getProd(catId);
                }
                self.lstProducts(products);
            });

            self.selectedProdId.subscribe(function (pProdId) {
                var pId = pProdId;
                var match = ko.utils.arrayFirst(lstProducts(), function (item) {
                    return pId === item.id;
                });
                self.selectedProd(match);
                //alert(selectedProd().qty);
            });

            self.addItem = function (item) {
                var nId = item.id; var nName = item.name; var cartQty = quantity; var iTot = itemTotal;
                cart.push(new Item(nId, nName, cartQty, iTot));
                //cart.push(cartLines);
            };                
        };
        ko.applyBindings(viewModel, document.getElementById("exp2"));

記住我是淘汰JS的新手。 因此，請原諒錯誤的編碼。 謝謝

Answer 1

問題似乎在於添加項目后使用什么值顯示數據。 如果我沒看錯，您正在將可觀察值分配給cart數組內的屬性cartQty 。 因為，您只是在cart中使用添加的值來顯示標簽信息，並且用戶不應該對此進行更改（除非刪除該記錄，然后在所需的修改后添加一個新記錄），否則無需使用雙向綁定，因此無需像您在此處所做的那樣分配可觀察的對象-

var cartQty = quantity;

因此，最好只分配可觀察對象包圍的值而不是可觀察對象本身來將它們分開。

您可以嘗試這樣的事情-

var cartQty = quantity();

因此，更改數量不會在其他地方產生副作用。