Avalonjs实现简单购物车功能(实例代码)-创新互联

 先给大家简单介绍下avalon概念

创新互联建站专注于黎城网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供黎城营销型网站建设，黎城网站制作、黎城网页设计、黎城网站官网定制、小程序设计服务，打造黎城网络公司原创品牌,更为您提供黎城网站排名全网营销落地服务。

avalon是国内最强大的MVVM框架，没有之一，虽然淘宝KISSY团队也搞了两个MVVM框架，但都无疾而终。其他的MVVM框架都没几个。也只有外国人与像我这样闲的架构师才有时间钻研这东西。我很早之前就预言，MVVM是前端的终极解决方案。我之前在盛大无线做盛大通行证就深有体会，一个业务逻辑对应十来个不同的界面，分层架构是必不可少的。因此双向绑定作为解药，结合很早就流行的MVC框架，衍生出MVVM这神器。

因为最近有在做购物车，然后我们是用avalon来实现一些模块的，所以顺其自然的用avalon来实现购物车，目前发现avalon还是比较强大的，大大的节约了代码量。

   购物车一般具备的功能是加减数量、选择商品、删除商品和计算金额，因为avalon具有双向绑定功能，所以杜绝了dom的操作，只需要完成功能的逻辑即可，可以分下面几个步骤实现。

runjs: http://runjs.cn/detail/1dnkgxom

  1、页面的Html结构

   这里不考虑好的效果，所以直接用最简单的html来实现了，主要包含控制器，列表循环，金额显示，简单代码结构如下

 

  
全选
  

  
  {{el.text}}
  
  加
  减
  删除
  
单价：{{el.price
 | currency}}
  
金额：{{el.num*el.price
 | currency}}
  
 
 
总金额：{{total
 | currency}}
 

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文题目：Avalonjs实现简单购物车功能(实例代码)-创新互联
本文路径：http://cdxtjz.cn/article/dsdjsi.html