avalon实现一个简单的带增删改查的成绩单
自从angular问世，一直就有去了解学习angular，一直想用angular去做一个项目，但无奈，大ng是国外产物，ng1.2版本就只兼容到IE8，1.3后的几个版本提升到IE9，据说NG2.0更是向移动端靠拢的。
一次次纠结中一天逛博客看到了司徒正美开发的avalon，当时又兴奋又犹豫，总觉得是一个私人在维护的框架，在许多方面都让人提不起信心，虽然一直有在学习avalon,但也一直不敢投入正式的生产环境中，一次次的逛官网看教程运行实例，现在想想还不如动手多做做示例。
今天就用avalon来做一个简单的成绩单。代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>avalon成绩单</title> <style> body{ font-size:14px; font-family:"Microsoft YaHei"; } .school-report{ width:720px; } table{ border-collapse:collapse; } .school-report tr.active{ background:green; } .school-report td,.school-report th{ text-align:center; border:1px solid #999; height:36px; line-height:36px; } .school-report a{ color:red; } .data_con{ position:relative; width:120px; height:36px; } .data_con input{ position:absolute; top:0; left:0; width:110px; height:34px; border:none; padding:0 5px; background:#babadc; font-size:14px; color:#fff; } </style> <script src="http://cdn.bootcss.com/avalon.js/1.4.7/avalon.js"></script> <script> var vm = avalon.define({ $id: "schoolReport", idz:"", namez:"", gradez:"", array:[ {id: "d1", name: "李世民", score: 67,nowz:false}, {id: "d2", name: "赢政", score: 90,nowz:false} ], editindex:-1, searchz:"", total:{ get:function(){ return this.array.length; } }, scoreall:{ get:function(){ var a=0; this.array.forEach(function(el){ a+=parseInt(el.score); }) return a; } }, //增加数据 addfn:function(){ var obj=null; if(vm.id!="" && vm.name!=""){ obj={id:vm.idz,name:vm.namez,score:vm.gradez==""?0:vm.gradez,nowz:false}; vm.array.push(obj); console.log(vm.idz,vm.namez,vm.gradez); vm.idz=""; vm.namez=""; vm.gradez=""; } }, //启动编辑 editfn:function(){ var elem=avalon(this), indexz=elem.data("index"); vm.editindex=indexz; //console.log(elem.data("index"),this["data-index"]); }, //编辑确认 editok:function(){ vm.editindex=-1; } }) //搜索实现 vm.$watch("searchz",function(newz,oldz){ var arr=lookfn(newz,vm.array); console.log(arr); for(var j=0,len0=vm.array.length;j<len0;j++){ vm.array[j].nowz=false; } for(var i=0,len=arr.length;i<len;i++){ vm.array[parseInt(arr[i])].nowz=true; } console.log(vm.$model); }) //根据值取得对应的索引号集合 function lookfn(str,arr){ var returnarr=[]; for(var i=0,len=arr.length;i<len;i++){ if(str!="" && arr[i].id.indexOf(str)!=-1){ returnarr.push(i); continue; } if(str!="" && arr[i].name.indexOf(str)!=-1){ returnarr.push(i); continue; } if(str!="" && String(arr[i].score).indexOf(str)!=-1){ returnarr.push(i); continue; } } return returnarr; } </script> </head> <body ms-controller="schoolReport"> <h3>成绩单</h3> <div> 增加人员：<input type="text" name="idnum" ms-duplex-string="idz"> <input type="text" name="namestr" ms-duplex-string="namez"> <input type="text" name="gradenum" ms-duplex-string="gradez"> <input type="button" value="add" ms-click="addfn"> </div> <div> 搜索：<input type="text" name="serchname" ms-duplex-string="searchz"> </div> <table class="school-report"> <thead> <tr> <th width="120">学位ID</th> <th width="120">姓名</th> <th width="120">成绩</th> <th width="120" colspan="2">操作</th> </tr> </thead> <tbody> <tr ms-repeat="array" ms-data-nowz="el.nowz" ms-class="active:el.nowz"> <td> <div class="data_con"> {{el.id}} <input type="text" ms-if-loop="$index==editindex" ms-duplex="el.id"> </div> </td> <td> <div class="data_con"> {{el.name}} <input type="text" ms-duplex="el.name" ms-if-loop="$index==editindex"> </div> </td> <td> <div class="data_con"> {{el.score}} <input type="text" ms-duplex="el.score" ms-if-loop="$index==editindex"> </div> </td> <td> <a href="javascript:void(0);" ms-click="editfn" ms-data-index="$index" ms-if-loop="$index!=editindex">edit</a> <a href="javascript:void(0);" ms-click="editok" ms-if-loop="$index==editindex">ok</a> </td> <td> <a href="javascript:void(0);" ms-click="$remove">del</a> </td> </tr> </tbody> <tfoot> <tr> <td>总人数:{{total}}</td> <td>总分:{{scoreall}}</td> <td></td> <td></td> <td></td> </tr> </tfoot> </table> </body> </html>
大致分析：
从整个案例来看，如果用JQ实现，我想信代码行数应该是现在的倍数级的增加，其中会是一堆堆DOM操作，而用avalon在整个项目中看不到任何DOM操作，摆脱了DOM操作的苦海，在速度与性能上都提升了，而且avalon与jQuery一同使用兼容也是妥妥的。
1：引入avalon.js,现在avalon的版本已经更新到1.5.5啦，但是多次尝试，不太稳定，项目中最好引用1.4+版本。
2：定义viewMode,avalon是通过avalon.define({})传入对象来构建一个数据模型，以上示例的viewModel如下：
3：view层实现，上救命view如下：
这里只是大概说一下实现过程，具体教程可查看avalon官网文挡，官网地址：http://avalonjs.github.io/#home.html
视频教程地址：http://edu.51cto.com/course/course_id-2533-page-1.html
前端乱炖也有很详细的文挡教程：http://www.html-js.com/article/column/234
好好学习！天天向上！
