avalon 选项卡切换问题，该怎么解决？

最近在看avalonJS，看到http://www.cnblogs.com/vajoy/p/4063824.html 这篇文章，对于最后面的例子很是疑惑。在这个代码的基础上应该怎样解决问题？
希望用过avalon的朋友解答一下，谢谢！

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/avalon.js"></script>
</head>
<body>
    <script type="text/javascript">
      var gg=[
          {"id":"1","title":"公告文章标题1"},
          {"id":"2","title":"公告文章标题2"},
          {"id":"3","title":"公告文章标题3"},
          {"id":"4","title":"公告文章标题4"}];
      var bd=[
          {"id":"1","title":"媒体报道文章标题1"},
          {"id":"2","title":"媒体报道文章标题2"},
          {"id":"3","title":"媒体报道文章标题3"},
          {"id":"4","title":"媒体报道文章标题4"}];
    </script>
    <div ms-controller="list">
        <span ms-mouseover="changeUl(1)">公告</span>
        <span ms-mouseover="changeUl(0)">媒体报道</span>
        <a ms-attr-href="'#!/'+ more_name">{{more_text}}</a>
        <ul>
            <li ms-repeat="infoList">
                  <a ms-attr-href="'#!/'+ more_name + '/' + el.id" ms-title="el.title">{{el.title}}</a>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var vm = avalon.define({
            $id: "list",
            more_name: "gg",
            more_text: "更多公告",
            gg:gg,
            bd:bd,
            infoList:gg,
            changeUl:function(flag){
                console.table(gg)
                if(flag){  //鼠标移过“公告”选项卡头部
                    vm.more_name = "gg";
                    vm.more_text = "更多公告";
                    vm.infoList = vm.gg;
                }else{  //鼠标移过“媒体报道”选项卡头部
                    vm.more_name = "bd";
                    vm.more_text = "更多报道";
                    vm.infoList = vm.bd;
                }
            }
        });
          avalon.scan();
    </script>
</body>
</html>

http://avalonjs.coding.me/cn/examples.html 这里有一个切换卡，基于avalon2

【热门文章】