html

<div>
    <ul ms-controller="test">
        <li ms-for="($index,$el) in data">
            我叫<span ms-text="$el.name"></span>，性别<span ms-text="$el.gender"></span>，今年<span ms-text="$el.age"></span>，我的爱好是<span ms-text="$el.hobby"></span>
        </li>
    </ul>
</div>

js

avalon.ready(function(){
   var vm=avalon.define({
       $id:"test",
       data:""
   });
   $.ajax({
       url:"./data.json",
       type:"get",
       dataType:"json",
       success:function(data){
           //console.log(data);
           vm.data=data.data;
       },
       error:function(){
           console.log("ajax请求错误")
       }
   });
   avalon.scan(document.body);
});

json数据（data.json）

{
  "data": [
    {
      "name":"小明",
      "age":"22",
      "gender":"男",
      "hobby":"篮球"
    },
    {
      "name":"小红",
      "age":"21",
      "gender":"女",
      "hobby":"排球"
    },
    {
      "name":"小熊",
      "age":"22",
      "gender":"男",
      "hobby":"跑步"
    }
  ]
}

完整demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>avalon练习</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.bootcss.com/avalon.js/2.2.7/avalon.js"></script>
<script>
avalon.ready(function(){
   var vm=avalon.define({
       $id:"test",
       data:""
   });
   $.ajax({
       url:"./data.json",
       type:"get",
       dataType:"json",
       success:function(data){
           //console.log(data);
           vm.data=data.data;
       },
       error:function(){
           console.log("ajax请求错误")
       }
   });
   avalon.scan(document.body);
});
</script>
<div>
    <ul ms-controller="test">
        <li ms-for="($index,$el) in data">
            我叫<span ms-text="$el.name"></span>，性别<span ms-text="$el.gender"></span>，今年<span ms-text="$el.age"></span>，我的爱好是<span ms-text="$el.hobby"></span>
        </li>
    </ul>
</div>
</body>
</html>
© 允许规范转载