examples/repeat0.html

<!DOCTYPE HTML>
<html>
    <head>
        <title>ms-repeat</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
        <script src="../avalon.js" ></script>
        <script>
            var vmodel = avalon.define("test", function(vm) {
                vm.array = ["aaa", "bbb", "ccc", "ddd"]
                vm.text = "初次赋值"
                vm.object = {
                    banana: "香蕉",
                    apple: "苹果",
                    peach: "桃子",
                    pear: "雪梨"
                }
            })
            setTimeout(function() {
                vmodel.array = ["@@@", "###", "$$$", "%%%"]
                vmodel.text = "<span style='color:red;'>再次赋值</span>"
                vmodel.object = {
                    grape: "葡萄",
                    coconut: "椰子",
                    pitaya: "火龙果",
                    orange: "橙子"
                }
            }, 2000)
        </script>
    </head>
    <body ms-controller="test">
        <p>{{text|html}}</p>
     <fieldset>
            <legend>ms-repeat</legend>
            <table width="100%">
                <tr>
                    <td>
                        <ul>
                            <li ms-repeat="array">{{el}}</li>
                        </ul>
                    </td>
                    <td>
                        <ol>
                            <li ms-repeat="object">{{$key}}: {{$val}}</li> 
                        </ol>
                    </td>
                </tr>
            </table>
        </fieldset>
        <fieldset>
            <legend>ms-each</legend>
            <ul ms-each="array">
                <li>{{el}}</li>
            </ul>
            <ul ms-each="array">
                <li>{{el}}</li>
                <li>========{{$index}}==========</li>
            </ul>
        </fieldset>
        <fieldset>
            <legend>ms-with</legend>
            <ul ms-with="object">
                <li>{{$key}}: {{$val}}</li>
            </ul>
        </fieldset>
    </body>
</html>