當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

MVVM架构~knockoutjs实现简单的购物车

發布時間：2025/4/16 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 MVVM架构~knockoutjs实现简单的购物车小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

返回目錄

概念相關

購物車相信大家都用過，很方便，可以將多個商品添加到購物車，并且可以修改購買商品的數據，當然為了用戶體驗好，在修改數據時，你的價格也會出現變化的，這使用JS可以實現，但我認為，代碼量挺大的，而使用knockoutjs可以大大減少代碼量，而且更重要的是，當前臺頁面有所調整時，這個JS只需要簡單調整，而不需要改后臺代碼！

代碼相關

下面看一下實現簡單購物車的代碼

1 View部分

<table><thead><tr><th>商品</th><th>單價</th><th>數量</th><th>小計</th><th></th></tr></thead><tbody data-bind="foreach:lines"><tr><td data-bind="with:product"><span data-bind="text:name"></span></td><td data-bind="with:product"><span data-bind='text:formatCurrency(price)' /></td><td><input data-bind='visible: product, value: productCount, valueUpdate: "afterkeydown"' /></td><td><span data-bind="visible:product,text:formatCurrency(subtotal())"></span></td><td><a href='#' data-bind='click: $parent.removeLine'>Remove</a></td></tr></tbody></table><p class='grandTotal'>Total value: <span data-bind='text: grandTotal()'></span></p><button data-bind='click: addLine'>Add product</button>

2 JS部分

3 有圖有真相

?完成代碼如下

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="jquery-1.7.1.min.js" type="text/javascript"></script><script src="knockout-2.1.0.js" type="text/javascript"></script></head> <body><table><thead><tr><th>商品</th><th>單價</th><th>數量</th><th>小計</th><th></th></tr></thead><tbody data-bind="foreach:lines"><tr><td data-bind="with:product"><span data-bind="text:name"></span></td><td data-bind="with:product"><span data-bind='text:formatCurrency(price)' /></td><td><input data-bind='visible: product, value: productCount, valueUpdate: "afterkeydown"' /></td><td><span data-bind="visible:product,text:formatCurrency(subtotal())"></span></td><td><a href='#' data-bind='click: $parent.removeLine'>Remove</a></td></tr></tbody></table><p class='grandTotal'>Total value: <span data-bind='text: grandTotal()'></span></p><button data-bind='click: addLine'>Add product</button><script type="text/ecmascript">function formatCurrency(value) {return "￥" + value;}var Product = function (id, name, price) {self = this;self.id = id;self.name = name;self.price = price;}var CartItem = function (product) {self = this;self.product = ko.observable(product);self.productCount = ko.observable(1);self.subtotal = ko.dependentObservable(function () {return this.product() ? this.product().price * parseInt("0" + this.productCount(), 10) : 0;}.bind(self));};var CartList = function () {var self = this;self.lines = ko.observableArray([new CartItem(new Product(1, "test1", 100))]);self.addLine = function () { self.lines.push(new CartItem(new Product(2, "test2", 200))) };self.removeLine = function (line) { self.lines.remove(line) };self.grandTotal = ko.computed(function () {var total = 0;$.each(self.lines(), function () { total += this.subtotal(); })return total;});};ko.applyBindings(new CartList());</script> </body> </html> View Code

感謝您的閱讀！