MVVM架构~knockoutjs实现简单的购物车
生活随笔
收集整理的這篇文章主要介紹了
MVVM架构~knockoutjs实现简单的购物车
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
返回目錄
概念相關(guān)
購物車相信大家都用過，很方便，可以將多個(gè)商品添加到購物車，并且可以修改購買商品的數(shù)據(jù)，當(dāng)然為了用戶體驗(yàn)好，在修改數(shù)據(jù)時(shí)，你的價(jià)格也會出現(xiàn)變化的，這使用JS可以實(shí)現(xiàn)，但我認(rèn)為，代碼量挺大的，而使用knockoutjs可以大大減少代碼量，而且更重要的是，當(dāng)前臺頁面有所調(diào)整時(shí)，這個(gè)JS只需要簡單調(diào)整，而不需要改后臺代碼！
代碼相關(guān)
下面看一下實(shí)現(xiàn)簡單購物車的代碼
1 View部分
<table><thead><tr><th>商品</th><th>單價(jià)</th><th>數(shù)量</th><th>小計(jì)</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 有圖有真相
?完成代碼如下
<!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>單價(jià)</th><th>數(shù)量</th><th>小計(jì)</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?
感謝您的閱讀！
返回目錄
總結(jié)
以上是生活随笔為你收集整理的MVVM架构~knockoutjs实现简单的购物车的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jsp页面获取参数的方法（url解析、e
- 下一篇： 修改ActiveProcessLinks