首页 > 代码库 > 通过两个例子讲解avalon的部分结构

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

2024-07-28 11:07:37   220人阅读

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;  //否则显示指定方块
                       
               }
<style></style>

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


联系
我们