经过两个例子讲解avalon的部分结构

时间 2019-11-12

标签经过两个例子讲解 avalon 部分结构繁體版

原文原文链接

avalon是一个迷你的mvvm框架，兼容IE6，若是你只打算兼容IE10与标准浏览器，那么下avalon.modern.js。而且体积比较小，下面就举两个例子介绍avalon。html

例子1

效果以下，点击add按钮可实现蓝色方块的添加，而且方块上面的数字也有所增长，在方块上点击即可实现该对应的方块删除，点击delete按钮最末端的方块消失。数组

在head 部分导入avalon，并设定方块样式。浏览器

 
       <head> 
      
       <title>TODO supply a title</title> 
      
       <meta charset= 
       "UTF-8" 
       > 
      
       <meta name= 
       "viewport"  
       content= 
       "width=device-width, initial-scale=1.0" 
       > 
      
       <script src= 
       "avalon.js" 
       ></script> 
      
       <style> 
      
       *{ list-style:none; margin: 0;padding: 0; boder:0;} 
      
       .color_cs{ background:  
       #ff9999; width: 400px; height: 400px;} 
      
       </style> 
      
       </head>

body中代码ruby

 
       <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= 
       "add"  
       /> 
      
       <input type= 
       "button"  
       ms-click= 
       "dd"  
       value= 
       "delete"  
       /> 
      
       </div> 
      
       </div>

ms-controlles 设置做用域，就是设置avalon效果实现范围, 在avalon中，有两个绑定做用域的属性，分别是ms-controller, ms-important
ms-repeat 循环绑定,在例子中用于循环数组
{{el}} 显示数组内容
ms-click 为单击实现事件
$remove 为点击删除该指定元素事件，等于直接导入remove()方法
不但有点击事件的绑定属性，还有其余的属性,详情可点击这里框架

 
       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

 
       <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只是隐藏而已。mvvm

 
       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;   
       //不然显示指定方块 
      
       }