返回目录
概念相关
购物车相信大家都用过，很方便，可以将多个商品添加到购物车，并且可以修改购买商品的数据，当然为了用户体验好，在修改数据时，你的价格也会出现变化的，这使用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部分
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 有图有真相
完成代码如下
<!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
感谢您的阅读！
返回目录
作者：仓储大叔，张占岭，
荣誉：微软MVP
