首页 > 代码库 > 通过两个例子讲解avalon的部分结构
通过两个例子讲解avalon的部分结构
avalon是一个迷你的mvvm框架,兼容IE6,如果你只打算兼容IE10与标准浏览器,那么下avalon.modern.js。并且体积比较小,下面就举两个例子介绍avalon。
例子1
效果如下,点击add按钮可实现蓝色 方块的添加,并且方块上面的数字也有所增加,在方块上点击便可实现该对应的方块删除,点击delete按钮最末端的方块消失。
在head 部分导入avalon,并设定方块样式。
?
1 2 3 4 5 6 7 8 9 10 | <head> <title>TODO supply a title</title> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <script src=http://www.mamicode.com/ "avalon.js" ></script> <style> *{ list-style:none; margin: 0;padding: 0; boder:0;} .color_cs{ background: #ff9999; width: 400px; height: 400px;} </style> </head> |
body中代码
?
1 2 3 4 5 6 7 8 9 10 11 | <div ms-controller= "square" style= " background:#99ccff;" > <ul style= " width: 1500px; display: inline-block; " > <li ms-repeat= "model" ><div style= " width: 200px; height: 200px; background: #66ffcc; margin: 10px 0 0 10px;float: left; display: block;" ms-click= "remove($remove)" ms-mouseover= "color_cs:color_change" >{{el}}</div></li> </ul> <div> <input type= "button" ms-click= "add" value=http://www.mamicode.com/ "add" /> <input type= "button" ms-click= "dd" value=http://www.mamicode.com/ "delete" /> </div> </div> |
ms-controlles 设置作用域,就是设置avalon效果实现范围, 在avalon中,有两个绑定作用域的属性,分别是ms-controller, ms-important
ms-repeat 循环绑定,在例子中用于循环数组
{{el}} 显示数组内容
ms-click 为单击实现事件
$remove 为点击删除该指定元素事件,等于直接导入remove()方法
不但有点击事件的绑定属性,还有其他的属性,详情可点击这里
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | var i = 3; avalon.define( "square" , function (vm){ vm.model = [ "1 " , " 2" , " 3" ]; //默认数组里有三个数 vm.add = function (){ //增加事件 vm.model.push(vm.model[i] = [i+1]); //导入push();方法 i++; } vm.remove = function (rm){ // 点击指定方块删除 rm(); }; vm.dd = function (){ //点击删除事件 vm.model.pop(); //导入pop();方法 i--; } }); |
例子2
?
1 2 3 4 | <div style= "background: #d1fcfb;" ms-controller= "change" > <ul style= " width: 1500px;display: inline-block;" ><li ms-repeat= "model" ms-click= "bb(el)" ms-visible= "!aa || el == aa" ><div class= "bb" >{{el}}</div></li></ul> </div> |
ms-visible 用判断来显示和隐藏,ms-if也可以做出同样的效果,但是ms-if的作用是把不满足的元素删除,而ms-visible只是隐藏而已。
?
1 2 3 4 5 6 7 8 9 10 | avalon.define( "change" , function (vm){ vm.model = [ "1" , "2" , "3" , "4" , "5" , "6" ]; //默认显示六个方块 vm.aa = ‘‘ ; //aa初始化状态,显示全部方块 vm.bb = function (el){ if (vm.aa) vm.aa = ‘‘ ; else vm.aa = el; //否则显示指定方块 } |
通过两个例子讲解avalon的部分结构
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。