MVVM架构~knockoutjs实现简单的购物车
2024-05-01 05:52:22
返回目录
概念相关
购物车相信大家都用过，很方便，可以将多个商品添加到购物车，并且可以修改购买商品的数据，当然为了用户体验好，在修改数据时，你的价格也会出现变化的，这使用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 有图有真相
完成代码如下
<!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
感谢您的阅读！
返回目录
MVVM架构~knockoutjs实现简单的购物车相关推荐
- MVVM架构~Knockoutjs系列之text,value,attr,visible,with的数据绑定
Knockoutjs是微软mvc4里一个新东西,用这在MVC环境里实现MVVM,小微这次没有大张旗鼓,而是愉愉的为我们开发者嵌入了一个实现MVVM的插件,这下面的几篇文章中,我和大家将一起去探讨它, ...
- MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法
说在前 有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都在它的源码 ...
- MVVM架构~knockoutjs系列之验证成功提示显示
对于knockout.validation来说,我们已经知道了如何去验证大部分表单元素,而有时,我们的需求希望在每个元素验证成功后,去显示正确的提示,这个我们很容易的使用self.元素.isValid ...
- MVVM架构~knockoutjs系列之验证信息自定义输出~再续
返回目录 对于一个项目的表单验证,方式有很多,效果也有很多,具体使用哪种完成取决于产品这边,产品让你用什么,你就要用什么,而做为开发人员,我们要做的就是＂整理近可能多的架构方式＂,这样才可以自由的应变 ...
- MVVM架构~knockoutjs系列之为validation.js扩展minLength和maxLength
返回目录 为什么要对minLength和maxLength这两个方法进行扩展呢,是因为这样一个需求,在用户注册时,可以由用户自己决定他们输入的字符,中文,英文,数字均可,这样做了之后,使用户的体验更好 ...
- MVVM架构~knockoutjs系列之包括区域级联列表的增删改
返回目录 这个例子我做了几次,之前总是有BUG,目前测试后,确定没有BUG才发上来的,主要功能是实现"我的银行"模块的增删改的功能,这个里面包括了级联列表的区域选择,这部分是难点, ...
- MVVM架构~knockoutjs系列之验证信息自定义输出~续
返回目录 上一讲中,我以一个实际中的例子说明了knockoutjs的自定义验证功能,在使用过程中,出现了一个问题,当然了不是问题,只是一种需求,上一讲中自定义验证的表现是:当页面加载后,自动显示有问题 ...
- MVVM架构~knockoutjs系列之扩展ajax验证~验证输入数据是否与后台数据相等
返回目录 在看这篇文章之前,你有必要先看我之前的文章,之前文章是将一个方法以参数的形式传给KO,然后返回一个真假值,去做验证,这类似于面向对象语言里的委托,在JS里我们叫它回调方法,本篇文章与前一文章 ...
- java用mvvm,[Java教程]MVVM架构~使用boxy和knockoutjs实现编辑功能
[Java教程]MVVM架构~使用boxy和knockoutjs实现编辑功能 0 2014-04-24 14:00:08 返回目录 这个功能我认为非常有用,尤其在后台管理系统中,它对用户来说,使用体验 ...
最新文章
- 皮一皮：当群聊被封，大家是如何聊天的...
- 资讯｜WebRTC M98 更新
- @RabbitListener组合注解消费消息
- Hibernate HQL基础 限定查询条件(这里面有各种条件查询)
- block的用法以及block和delegate的比较（转发）
- 3 photolemur 样式下载_全自动照片美化软件Photolemur mac特别版
- ThymeLeaf的eclipse插件安装
- python写作_开源一个Python文档写作应用：MrDoc
- Linux系统彻底卸载MySQL数据库
- 网易云Vip——关于.ncm 解码成 .mp3
- EasyX实现按钮效果
- 谷歌应用程序无法启动,因为应用程序的并行配置不正确的问题解决方案
- 软件测试的意义究竟是什么？
- 记2015年的腾讯校招经历——状态篇
- SAP_ABAP_采购价格条件报表
- 05 pandas变形
- 让自己的底线一降再降，相当于没有底线
- python在mac模拟鼠标点击_如何使用Python在Mac中控制鼠标？
- 非API接口限制介绍
- oracle将表导入到表空间,关于ORALCE一个表空间的数据导入到另一个表空间的方法（原创）...