阿瓦隆是国内最强大的MVVM框架,没有之一,虽然淘宝想吻你团队也搞了两个MVVM框架,但都无疾而终。其他的MVVM框架都没几个。也只有外国人与像我这样闲的架构师才有时间钻研这东西。我很早之前就预言,MVVM是前端的终极解决方案。我之前在盛大无线做盛大通行证就深有体会,一个业务逻辑对应十来个不同的界面,分层架构是必不可少的,因此双向绑定作为解药,结合很早就流行的MVC框架,衍生出MVVM这神器。
,因为最近有在做购物车,然后我们是用阿瓦隆来实现一些模块的,所以顺其自然的用阿瓦隆来实现购物车,目前发现阿瓦隆还是比较强大的,大大的节约了代码量。
,,,购物车一般具备的功能是加减数量,选择商品,删除商品和计算金额,因为阿瓦隆具有双向绑定功能,所以杜绝了dom的操作,只需要完成功能的逻辑即可,可以分下面几个步骤实现。
runjs: http://runjs.cn/detail/1dnkgxom
,,,<强> 1页面的Html结构
,,,这里不考虑好的效果,所以直接用最简单的html来实现了,主要包含控制器,列表循环,金额显示,简单代码结构如下
& lt;身体ms-controller=安馐浴北?
& lt; ul ms-visible=癮rr.length”比;
& lt; li> & lt;输入类型=案囱】颉?
ms-click=" checkAll " ms-duplex-checked=" checkAllbool "/祝辞全选& lt;/li>
& lt;李ms-repeat=凹永毡群５痢?
比;
& lt;输入类型=案囱】颉?
ms-attr-value=" https://www.yisu.com/zixun/el.id " ms-duplex="选择"/比;
{{el.text}}
& lt;输入类型=拔谋尽?
name=" ms-attr-value=" https://www.yisu.com/zixun/el.num " ms-on-input=癱hangeNum (el)”在
& lt; a href=" javascript:,“rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”
ms-click=" + (el) "在加& lt;/a>
& lt; a href=" javascript:,“rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”
ms-click=" - (el) "祝辞减& lt;/a>
& lt; a href=" javascript:,“rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”
ms-click="德尔(el) "祝辞删除& lt;/a>
& lt; p>单价:{{el.price
|货币}}& lt;/p>
& lt; p>金额:{{el.num * el.price
|货币}}& lt;/p>
& lt;/li>
& lt;/ul>
& lt; p>总金额:{{总数
|货币}}& lt;/p>
& lt;/body>
,,,,这里有全选加,减,删除几个功能事件,金额用了过滤器货币。
,,,<强> 2,引入avalon.js,定义模型
,,,引入js是必须的,那么引入avalon.js后可以定义了
var vm=avalon.define ({
$ id:
“测试”
});
,,这样就定义了一个简单的模型,$ id传入的是控制器的值,本文例子的控制器是写在身体,如果不理解可以去看看官网。
,,, <强> 3,定义购物车里面的商品
,,,实际项目中,这个肯定是通过后台获取到的,这里为了演示就直接定义了,从第一点的html结构可以看出来,这里购物车的商品用的是加勒比海盗,所以接着定义的就是加勒比海盗,可以这样定义
加勒比海盗
:【
{
id: 1、
num: 1、
价格:45.5,
文本:“商品1 '
},
{
id: 2
num: 1、
价格:8.8,
文本:“商品2》
}& lt;跨
风格="字体大小:
9分;行高:1.5;“祝辞]& lt;/span>
,,,这里就定义两个用来测试,那么还需要一个值来保存选中的商品id,这里给模型增加一个选择属性,类型为数组
选择:[]
,, <强>,4,定义全选的模型和方法
,,,购物车里面一般都有全选的功能的,只是表现的形式不一样,那么可以这么定义
checkAllbool
:假的,
checkAll
:函数()
{
如果(this.checked)
{
var _arr=[];
avalon.each (vm.arr函数(指数项){
_arr(指数)=item.id +”;
});
vm.selected=_arr;
}
其他{
vm.selected=[];
}
}
,,,通过checkAllbool属性来实现和判断是否选中“全选”,通过checkAll来实现选中全部或者取消选中全部,其实就是修改模型里面选择的属性,如果选择为空数组则没有一个是选中的,如果那个需要选中只需要把对应的值放到所选数组中即可,因为在html中复选框使用ms-duplex进行绑定的,而绑定的是选择属性。
