迷你MVVM框架 avalonjs 学习教程11、循环操作

avalon是通过ms-repeat实现对一组数据的批量输出。这一组数据可以是一个数组，也可以是一个哈希（或叫对象）。我们先从数组说起吧。

第二节就说，凡是定义在VM中的数组，如果没有以$开头或者没放在$skipArray数组里，都会转会监控数组。监控数组其实就是一个被重写了push、unshift、shift、pop、 splice、sort、reverse方法的普通数组。当然它也添加了其他一些方法，如set、 pushArray、remove、removeAt、removeAll、clear、ensure、 contains、size。我们只要操作这些方法就能同步视图。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="avalon.js" ></script>
        <script>
            var model = avalon.define({
                $id: "test",
                array: ["aaa","bbb","ccc"]
            })

        </script>
    </head>
    <body ms-controller="test">
        <ul>
            <li ms-repeat="array">{{el}} --- {{$index}}</li>
        </ul>
    </body>
</html>



上面就是array被改造成监控数组后的样式，添加了大量属性与方法。
ms-repeat是配合与监控数组使用的。我们注意到在ms-repeat的作用范围下，多出了el、$index两个变量，而它们在VM（ViewModel）中是寻不到它们的踪影。这是循环绑定特有的功能，其中el称之为代理VM，$index是与这个el相对应的索引值。并且这个el是可以配置的，如

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <script src="avalon.js" ></script>
            <script>
                var model = avalon.define({
                    $id: "test",
                    array: ["aaa","bbb","ccc"]
                })
            </script>
        </head>
        <body ms-controller="test">
            <ul>
                <li ms-repeat-item="array">{{item}} --- {{$index}}</li>
            </ul>
        </body>
    </html>

说起作用域，我们可以看到ms-repeat是将当前元素根据当前数组的个数，以原元素为模板，在原地重复复制N遍实现的。

有了循环绑定，我们想做一个切换卡是非常简单的。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="avalon.js" ></script>
        <script>
            var model = avalon.define({
                $id: "test",
                array: ["aaa", "bbb", "ccc"],
                currentIndex: 0,
                changeIndex: function(i) {
                    model.currentIndex = i
                }
            })
        </script>
        <style>
            .ms-tabs{
                border: 1px solid black;
                padding: 1em;
                width:300px;
                height:100px;
            }
            .ms-tigger{
                background:#DDD;
                margin-right:1em;
            }
            .ms-active{
                background:#CD235C;
            }
        </style>
    </head>
    <body ms-controller="test">
        <button type="button"
                class="ms-tigger"
                ms-repeat="array"
                ms-class="ms-active: currentIndex === $index"
                ms-click="changeIndex($index)">切换键{{$index+1}}</button>
        <div class="ms-tabs"
             ms-repeat="array"
             ms-if-loop="currentIndex == $index">{{el}}</div>
    </body>
</html>


这里有一个ms-if-loop，第三节就介绍过绑定属性的执行顺序，ms-if是先于ms-repeat执行的，当我想在循环时，要根据元素的情况做一些分支判定时就实现不了。因此需要一个晚于ms-repeat的ms-if，于是ms-if-loop就应运而生了。

在循环过程中，ms-repeat除了会产生el、$index等临时变量，还有其他变量供我们调遣。

  • $index，这个一个数字，为元素对应的索引值
  • $first，这是一个布尔，判定它是否第一个
  • $last，这是一个布尔，判定它是否最后一个
  • $remove，这是一个方法，移除此数组元素
  • $outer，这是一个对象，用于获取外围循环中的VM对象，它里面包含$index, $first, $last, $remove等属性。

它们的关系就如下面的javascript循环代码：

for(var i = 0, n = array.length; i < n; i++){  //----> ms-each-el=array
   var el = array[i] // $index --> i
   for(var j = 0, k = el.length; j < k; j++){  //---> ms-each-elem=el
        var elem = el[j] // elem.$outer --->  el
    }
}

下面我们看一下$first、 $last、$remove的使用方法：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="avalon.js" ></script>
        <script>
            var model = avalon.define({
                $id: "test",
                array: ["aaa", "bbb", "ccc", "ddd", "eee", "fff", "ggg"]
            })
        </script>
        <style>
            .last{
                background: purple;
            }
            .first{
                background:violet;
            }
        </style>
    </head>
    <body ms-controller="test">
        <ul>
            <li ms-repeat-xx="array"
                ms-class="last: $last"
                ms-class-1="first: $first"
                ms-click="$remove">{{xx}}:{{$index}}</li>
        </ul>
    </body>
</html>


当我们点击LI元素时，它就会自动从监控数组移除对应的元素，并立即同步视图，删除我们刚才点击的元素节点，同时会调整其他元素的$index、$first、$last，从而确保first、 last类名显示正确。

$outer主要是用在二维数组或多维数组里。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="avalon.js" ></script>
        <script>
            var model = avalon.define({
                $id: "test",
                array: [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]]
            })
        </script>
    </head>
    <body ms-controller="test">
        <table border="1">
            <tr ms-repeat-el="array">
                <td ms-repeat-elem="el">{{elem}}  它位于第<b style="color:orchid">{{$outer.$index}}</b>行</td>
            </tr>
        </table>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <title>avalon入门</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="avalon.js" type="text/javascript"></script>
        <script>
            var model = avalon.define({
                $id: "test",
                num: [1,2,3],
                data: ["a", "b", "c"]
            });

        </script>
    </head>
    <body>
        <div ms-controller="test">
            <div ms-repeat="num">
                <strong ms-repeat="data">
                    {{el}}: {{$outer.el}}
                </strong>
            </div>
        </div>

    </body>
</html>

如果我们想在绑定属性得到当前数组的长度，请记得使用size方法，不要直接用length属性啊。我们来一个复制，演示怎么调用它的方法来同步视图的。

<!DOCTYPE HTML>
<html>
    <head>
        <title>ms-repeat</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="avalon.js" ></script>
        <script>
            avalon.define("test", function(vm) {//这里是使用avalon.define的旧风格
                vm.array = ["1", "2", "3", "4"]
                "push,unshift,remove,ensure".replace(/\w+/g, function(method) {
                    vm[method] = function(e) {
                        if (this.value && e.which == 13) {//this为input元素
                            vm.array[method](this.value);
                            this.value = "";
                        }
                    }
                })

                vm.removeAt = function(e) {
                    if (isFinite(this.value) && e.which == 13) {//this为input元素
                        var a = ~~this.value
                        vm.array.removeAt(a)
                        this.value = "";
                    }
                }
                "pop,shift,sort,reverse".replace(/\w+/g, function(method) {
                    vm[method] = function(e) {
                        vm.array[method]();
                    }
                })
            });

        </script>
    </head>
    <body ms-controller="test">
        <p>监控数组拥有以下方法，我们可以操作它们就能同步对应的区域</p>
        <blockquote>
            push, pushAll, shift, unshift, pop, slice, splice, remove, removeAt, removeAll, clear, ensure, sort, reverse, set
        </blockquote>
        <ul>
            <li  ms-repeat="array">数组的第{{$index+1}}个元素为{{el}}</li>
        </ul>
        <p>对数组进行push操作，并回车<input ms-keypress="push"></p>
        <p>对数组进行unshift操作，并回车<input ms-keypress="unshift"></p>
        <p>对数组进行ensure操作，并回车<input ms-keypress="ensure"><br/>
            (只有数组不存在此元素才push进去)</p>
        <p>对数组进行remove操作，并回车<input ms-keypress="remove"></p>
        <p>对数组进行removeAt操作，并回车<input ms-keypress="removeAt"></p>
        <p><button type="button" ms-click="sort">对数组进行sort操作</button></p>
        <p><button type="button" ms-click="reverse">对数组进行reverse操作</button></p>
        <p><button type="button" ms-click="shift">对数组进行shift操作</button></p>
        <p><button type="button" ms-click="pop">对数组进行pop操作</button></p>
        <p>当前数组的长度为<span style="color:red">{{array.size()}}</span>，注意 我们无法修改数组length的固有行为，因此它无法同步视图，需要用size方法。</p>

    </body>
</html>


通过操作属性就能操作视图是不是很爽呢！要知道上面的代码如果换成jQuery来不写不知要写多少行！

我们再来一点实用的例子。

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="avalon.js"></script>
        <script>
            var model = avalon.define({
                $id: "test",
                data: [{checked: false}, {checked: false}, {checked: false}],
                allchecked: false,
                checkAll: function() {
                    var bool = model.allchecked = this.checked
                    model.data.forEach(function(el) {
                        el.checked = bool
                    })
                },
                checkOne: function() {
                    if (!this.checked) {
                        model.allchecked = false
                    } else {//avalon已经为数组添加了ecma262v5的一些新方法
                        model.allchecked = model.data.every(function(el) {
                            return el.checked
                        })
                    }
                }
            })
        </script>
    </head>
    <body>
        <table ms-controller="test" border="1">
            <tr>
                <td><input type="checkbox" ms-duplex-radio="allchecked" data-duplex-changed="checkAll"/>全选</td>
            </tr>
            <tr ms-repeat="data">
                <td><input type="checkbox"  ms-duplex-radio="el.checked" ms-data-index=$index data-duplex-changed="checkOne"/>xxxxxxxxxxxx</td>
            </tr>
        </table>
    </body>
</html>

此外，我们还可以通过data-each-rendered来指定这些元素都插入DOM被渲染了后执行的回调，this指向元素节点，有一个参数表示为当前的操作，是add、del、 move、 index还是clear。

上面我们说了这么有关数组的东西，我们再来看它是如何操作哈希的。对于哈希，ms-repeat内部只会产生$key、 $val、 $outer三个变量，不存在$index什么的。$key就是属性名，$val就是属性值，$outer与之前的讲解相同。如果你想在对象循环时使用$index，可以这样做：

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="avalon.js"></script>
        <script>
            var index = 0
            var model = avalon.define({
                $id: "test",
                data:{
                    aaa: 1111,
                    bbb: 2222,
                    ccc: 3333,
                    ddd: 4444
                },
                getIndex: function(){
                    return index++
                }
            })
        </script>
    </head>
    <body ms-controller="test">
        <ul>
            <li ms-repeat="data" >{{getIndex()}}、{{$key}}--{{$val}}</li>
        </ul>
    </body>
</html>

如果我们想控制对象属性的输出顺序，或让某些元素不输出来，那么我们可以使用data-with-sorted回调。它用ms-repeat、ms-with绑定，赶对象渲染之前触发，要求输出一个字符串数组，对象的键值对会根据它依次输出；框架默认会输入原对象的所有键名构成的数组作为参数。

我们改一下上面的例子：

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="avalon.js"></script>
        <script>
            var index = 0
            var model = avalon.define({
                $id: "test",
                data:{
                    aaa: 1111,
                    bbb: 2222,
                    ccc: 3333,
                    ddd: 4444
                },
                keys: function(a){
                    console.log(a)
                    console.log(this)
                    return  ["ccc","ddd","aaa"]
                },
                getIndex: function(){
                    return index++
                }
            })
        </script>
    </head>
    <body ms-controller="test">
        <ul>
            <li ms-repeat="data" data-with-sorted="keys" >{{getIndex()}}、{{$key}}--{{$val}}</li>
        </ul>
    </body>
</html>

不过ms-repeat只能循环自身，如果有时我们碰到一些复杂的结构，如定义列表，那么我们可以使用ms-each、 ms-with。ms-each是用于循环对象，ms-with是循环对象。除了循环范围不一样外，其他与ms-repeat没什么不同。

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="avalon.js"></script>
        <script>
            var model = avalon.define({
                $id: "test",
                data: [
                    {text: "title1", value: 111111},
                    {text: "title2", value: 222222},
                    {text: "title3", value: 333333}
                ]
            })
        </script>
    </head>
    <body ms-controller="test">
        <dl ms-each="data">
            <dt>{{el.text}}</dt>
            <dd>{{el.value}}</dd>
        </dl>
    </body>
</html>

循环绑定是一个非常重要的绑定，是属于流程绑定之一，用法与注意点非常多，我们可以在这里继续学习。

时间： 2024-10-08 12:46:53

迷你MVVM框架 avalonjs 学习教程11、循环操作的相关文章

迷你MVVM框架 avalonjs 学习教程1、引入avalon

avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终.其他的MVVM框架都没几个.也只有外国人与像我这样闲的架构师才有时间钻研这东西.我很早之前就预言,MVVM是前端的终极解决方案.我之前在盛大无线做盛大通行证就深有体会,一个业务逻辑对应十来个不同的界面,分层架构是必不可少的.因此双向绑定作为解药,结合很早就流行的MVC框架,衍生出MVVM这神器. 但这么牛叉的东西,为什么现在才流行起来呢?要不是谷歌振臂高呼,这个一直缩在flex, wps

迷你MVVM框架 avalonjs 学习教程16、过滤器

avalon的过滤器是参考自angular与rivets.它也被称做管道文本过滤器,它的处理对象只能是文本(字符串),它只能用在文本绑定中,并且只能是双花括号形式.下面是各大家的过滤器比较: rivetsjs <span rv-text="event.startDate | date"></span> <input rv-value="item.price | currency"> <span rv-text="b

迷你MVVM框架 avalonjs 学习教程4、数据填充

MVVM是前端的究极解决方案,你们可能用过jQuery,但那个写的代码不易维护:你们可以听过说requirejs与seajs,传说中的模块开发,加载器,但它们的最终目标是打包:你们可能听过underscope,那是一个工具集:你们可以听说过ejs,Mustache.HandlebarsJS等模板引擎,它们是用来替代字符串拼接--凡此种种,它们在我们的业务开发中只是很少的部分,带来的帮助也很有限.前端开发,贯彻始终的是如何将后端的数据显示出来,将用户的输入格式化送到后端,都离不开DOM操作,而DO

迷你MVVM框架 avalonjs 学习教程22、avalon性能大揭密

avalon之所以能在页面处理1W个绑定(angular对应的数字是2000),出于两个重要设计--基于事件驱动的双向绑定链及智能CG回收机制. avalon的双向绑定链是通过Object.defineProperties及VBScript,将要操作VM属性变成一种访问器属性.访问器属性是一种特殊的属性,需要我们为它指定setter.getter方法(当然,这也是框架内部生成的,只有计算属性可以做一些干预),当用户对此属性进行赋值操作时,就会调用setter方法,对它进行读取时,就会进行gett

迷你MVVM框架 avalonjs 学习教程20、路由系统

SPA的成功离开不这三个东西,分层架构,路由系统,储存系统.分层架构是我们组织复杂代码的关键,这里特指MVVM的avalon:路由系统是将多个页面压缩在一个页面的关键:储存系统特指本地储存,是安全保存大量数据的关键.本章节介绍的是avalon三柱臣之一的mmRouter(内含mmHistory). 我们先上一个示例吧. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit

迷你MVVM框架 avalonjs 学习教程8、属性操作

属性操作是DOM操作很大的一块,它包括类名操作,表单元素的value属性操作,元素固有属性的管理,元素自定义属性的管理,某些元素的一些布尔属性的操作.大多数情况下,元素属性的值是字符串类型,我们称之为字符串属性,但有一些属性的是布尔,也存在是数字类型.节点引用的情况.当前jQuery处理它们就是搞了N个钩子对象,才摆平它们.avalon为了收拾它们也设置N多绑定,其中类名部分交由ms-class. ms-hover. ms-active处理,这些其他章节介绍:表单元素的value属性之前也说过,

迷你MVVM框架 avalonjs 学习教程21、双向绑定链

avalon的双向绑定机制,是通过一条依赖链实现.此依赖链最底层是监控属性.监控数组,中层是计算属性.监控函数,再上点是求值函数,最上层是视图刷新函数. 所谓计算属性,监控属性,监控函数属性,我们改变它们的值,它们会引发视图变化:而监控数组,是我们调用它的一些方法,也会引发视图变化. var vm = avalon.define({ a: "这是监控属性", $b: "这是非监控属性", $skipArray: ["c", "d&quo

迷你MVVM框架 avalonjs 学习教程10、样式操作

一般情况下我们通过设置类名就可以改变元素的样式,但涉及到动画部分,就一定需要设置内联样式了,因此有了ms-css.*ms-css*的用法为ms-css-样式名="样式值", 如ms-css-width=”prop”(会自动补px),ms-css-height=”{{prop}}%”, ms-css-color=”prop”, ms-css-background-color=”prop”, ms-css-font-size=”{{prop}}px”.细细联想,ms-css与ms-clas

迷你MVVM框架 avalonjs 学习教程9、类名操作

ms-class是avalon用得最多的几个绑定之一,也正因为如此其功能一直在扩充中.根据时期的不同,分为旧风格与新风格两种. 旧风格是指ms-class-xxx=”expr”,*ms-class-aaa-bbb=”expr”*.正如第三节<绑定属性与扫描机制>所讲,一个绑定属性分成三部分,第一部分是ms,第二部分是class,第三部分是第二个-之后的所有字符串,它们被称之为param.上面的xxx与aaa-bbb都是我们要处理里的类名.等号后面的expr是一个表达式,根据它们的真假值决定是添