照着todomvc官网的例子，做了一个avalon版的todos，功能全都有了，而且加了router模块，比司徒大大写的都完善(≧▽≦)/~

　　js文件整整100行，初次使用avalon，书写过程中绕了一些弯子，不过还好最终绕回来了。整体感觉如下：

1. 相比用jQuery，代码量下去了，编码消耗的时间貌似更多了，一来是viewmodel需要一定的逻辑设计，不是像用jQuery那样一根筋一码到底，二来是可能我对框架还不是很熟，以后熟悉后效率会飞速提升。
2. 有一些特性并不是想当然的那样，比如对数组监控，目前只能监控length的变化，数组元素如果是对象，属性发生变化无法监控。不过可以通过其他方式变通实现。
3. view层能看到什么，vm层几乎都需要有一个属性与之对应，宁可多写一个属性，也不要绕别的逻辑来展示数据了。vm扁平化应该是设计思路。

　　demo展示如下：

　　

　　你也可以访问单独页面。

　　源码也贴一下好了：

　　html：

    
             
         
     
    
      
        
       
todos
        
           
      
    
      
        
               
       Mark all as complete        
       
            
        
                
         
                    
                              
          { {el.content}}                    
                          
         
                            
        
       
    
      
    
      
        
       {
   {todolist.length}} item left        
       
            
        
                All            
            
        
                Active            
            
        
                Completed            
        
       
        
       Clear completed ({
   {completednum}})    
      
     
     
    
      
双击列表可编辑
    
      
前进、后退可观察路由效果
    
      
Created by 吕大豹
     

　　index.js：

require(["mmRouter"], function(){    var model = avalon.define({        $id: "todos",        newtodo: "",        filter: 1, //1：all， false：active, true：completed        allchecked: false,        editindex: -1, //当前正在编辑的索引        todolist: [            {                content: 'test111',                complete: false            },            {                content: 'test222',                complete: true            }        ],        completednum: 0,        setcompletednum: function(){            setTimeout(function(){                var count = 0;                avalon.each(model.todolist, function(i, el){                    if(el.complete){                        count++;                    }                });                model.completednum = count;                }, 0);        },        add: function(e) {            if(e.keyCode === 13){                var newtodo = model.newtodo.trim();                if (!newtodo.length) {                    return;                }                model.todolist.push({                    content: newtodo,                    complete: false                });                model.newtodo = "";            }        },        edit: function($index, node){            model.editindex = $index;            node.parentNode.parentNode.getElementsByTagName('input')[1].focus();        },        editover: function(){            model.editindex = -1;        },        clear : function(){            var actived = [];            avalon.each(model.todolist, function(i, el){                if(!el.complete){                    actived.push(el);                }            });            model.todolist = actived;            model.completednum = 0;        },        setFilter: function(value){            model.filter = value;        }    });    model.setcompletednum();    model.$watch('allchecked', function(a, b){        avalon.each(model.todolist, function(i, el){            el.complete = a;        });        if(a){            model.completednum = model.todolist.length;        }        else{            model.completednum = 0;        }    });    model.todolist.$watch('length', function(){        model.setcompletednum();    });    function callback() {        var filter = 1;        switch(this.path){            case '\/active' :                filter = false;            break;            case '\/completed' :                filter = true;            break            case '\/all' :                filter = 1;            break;        }        model.setFilter(filter);    }    avalon.router.get("/all", callback)    avalon.router.get("/active", callback)    avalon.router.get("/completed", callback)    avalon.history.start();    avalon.scan();});