概念相关
购物车相信大家都用过,很方便,可以将多个商品添加到购物车,并且可以修改购买商品的数据,当然为了用户体验好,在修改数据时,你的价格也会出现变化的,这使用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部分
<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>
3 有图有真相
完成代码如下
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!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>
感谢您的阅读!