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

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

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

　　demo展示如下：

　　

　　你也可以点这里访问单独页面。

　　源码也贴一下好了：

　　html：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf8" />

    <title>avalon todos</title>

    <link rel="stylesheet" href="css/base.css">

    <script src="js/avalon.min.js"></script>

</head>

<body>

<section id="todoapp" ms-controller="todos">

    <header id="header">

        <h1>todos</h1>

        <input id="new-todo" placeholder="What needs to be done?" autofocus ms-duplex="newtodo" ms-keyup="add">

    </header>

    <section id="main" style="display: block;">

        <input id="toggle-all" type="checkbox" ms-duplex-checked="allchecked">

        <label for="toggle-all">Mark all as complete</label>

        <ul id="todo-list">

            <li ms-class="completed:el.complete" ms-class-1="editing: $index === editindex" ms-repeat="todolist" ms-visible="filter===1 || filter===el.complete">

                <div class="view">

                    <input class="toggle" type="checkbox" ms-duplex-checked="el.complete" ms-change="setcompletednum">

                    <label ms-dblclick="edit($index, this)">{{el.content}}</label>

                    <button class="destroy" ms-click="$remove"></button>

                </div>

                <input class="edit" ms-duplex="el.content" ms-blur="editover">

            </li>

        </ul>

    </section>

    <footer id="footer" style="display: block;">

        <span id="todo-count"><strong>{{todolist.length}}</strong> item left</span>

        <ul id="filters">

            <li>

                <a ms-class="selected:filter===1" href="#!/all" ms-click="setFilter(1)">All</a>

            </li>

            <li>

                <a ms-class="selected:filter===false" href="#!/active" ms-click="setFilter(false)">Active</a>

            </li>

            <li>

                <a ms-class="selected:filter===true" href="#!/completed" ms-click="setFilter(true)">Completed</a>

            </li>

        </ul>

        <button id="clear-completed" ms-click="clear">Clear completed ({{completednum}})</button>

    </footer>

</section>

<div id="info">

    <p>双击列表可编辑</p>

    <p>前进、后退可观察路由效果</p>

    <p>Created by <a href="http://www.cnblogs.com/lvdabao">吕大豹</a></p>

</div>

<script src="js/index.js"></script>

</body>

</html>

　　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();

});

用avalon实现一个完整的todomvc（带router）的更多相关文章

  1. 《Java从入门到失业》第四章：类和对象（4.3）：一个完整的例子带你深入类和对象

    4.3一个完整的例子带你深入类和对象 到此为止,我们基本掌握了类和对象的基础知识,并且还学会了String类的基本使用,下面我想用一个实际的小例子,逐步来讨论类和对象的一些其他知识点. 4.3.1需求 ...

  2. 【如何快速的开发一个完整的iOS直播app】(播放篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看上篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,集成ijkpl ...

  3. 【如何快速的开发一个完整的iOS直播app】(原理篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 目录 [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](播放篇) [如何快速的开发一个完整的 ...

  4. Django1.8教程——从零开始搭建一个完整django博客（一）

    第一个Django项目将是一个完整的博客网站.它和我们博客园使用的博客别无二致,一样有分类.标签.归档.查询等功能.如果你对Django感兴趣的话,这是一个绝好的机会.该教程将和你一起,从零开始,搭建 ...

  5. 如何快速的开发一个完整的iOS直播app(原理篇)

    目录 [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](播放篇) [如何快速的开发一个完整的iOS直播app](采集篇) 前言 大半年没写博客了,但 ...

  6. 开发一个完整的JavaScript组件

    作为一名开发者,大家应该都知道在浏览器中存在一些内置的控件:Alert,Confirm等,但是这些控件通常根据浏览器产商的不同而形态各异,视觉效果往往达不到UI设计师的要求.更重要的是,这类内置控件的 ...

  7. SQL Server Database 维护计划创建一个完整的备份策略

     SQL Server维护计划Maintenance Plan这是一个非常有用的维护工具,能够完成大部分的数据库维护任务,通过这些功能包.您可以省略大量的编码时间. 介绍的不是非常多,特此补上一篇 ...

  8. 一个完整的Installshield安装程序实例—艾泽拉斯之海洋女神出品（四） --高级设置二

    原文:一个完整的Installshield安装程序实例-艾泽拉斯之海洋女神出品(四) --高级设置二 上一篇:一个完整的安装程序实例—艾泽拉斯之海洋女神出品(三) --高级设置一4. 根据用户选择的组 ...

  9. 一个完整的Node.js RESTful API

    前言 这篇文章算是对Building APIs with Node.js这本书的一个总结.用Node.js写接口对我来说是很有用的,比如在项目初始阶段,可以快速的模拟网络请求.正因为它用js写的,跟i ...

随机推荐

  1. ue4 plugin的编译加载

    插件Plugin: 本来应该是指一种纯以接口与外界打交道的程序模块,在同一接口背后可以有多种实现,更换实现完全不影响客户端代码(不用重编). 但是在ue4的世界里,插件似乎不是这个意思,仅仅是一种可以 ...

  2. 如何将C++代码逆向生成类图 (VS2013)

    1. 将代码添加到VS2013工程中: 2. 切换到"类视图": 3. 选中项目 右键"视图"->"查看类图". 如果项目文件太多的话 ...

  3. ember - 观察者模式

    Ember可以察觉所有属性的变化,包括计算属性.观察者是非常有用的,特别是计算属性绑定之后需要同步的时候. 观察者经常被Ember开发过度使用.Ember框架本身已经大量使用观察者,但是对于大多数的开 ...

  4. Spark简介

    Spark是UC Berkeley AMP lab所开源的类Hadoop MapReduce的通用并行框架,Spark,拥有Hadoop MapReduce所具有的优点:但不同于MapReduce的是 ...

  5. error C2065: “CDatabase”: 未声明的标识符

    使用vc++与access的接口时出现错误“error C2065: “CDatabase”: 未声明的标识符” 解决方法: 添加 #include "afxdb.h"

  6. Android自定义View之CircleView

    Android自定义View之CircleView 版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请表明出处:http://www.cnblogs.com/cavalier-/p/5999 ...

  7. asp.net C# cookies 的使用方法

    Response.Cookie("username").value="aa" 写入username=Request.Cookies("username ...

  8. H5前端性能测试快速入门

    前言 说到H5测试,对于做WEB测试的同学来说再熟悉不过了,它包括页H5功能测试,前端性能测试,浏览器兼容性能测试,以及服务端性能测试.那本文谈到的则是H5前端性能测试,并希望通过阅读本文后,能够知道 ...

  9. 高性能 CSS3 动画

    注:本文出自腾讯AlloyTeam的元彦,文章也可以在github上浏览.请尊重版权,转载请注明来源,多谢-- 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量 ...

  10. 【转】java架构师之路：JAVA程序员必看的15本书的电子版下载地址

    作为Java程序员来说,最痛苦的事情莫过于可以选择的范围太广,可以读的书太多,往往容易无所适从.我想就我自己读过的技术书籍中挑选出来一些,按照学习的先后顺序,推荐给大家,特别是那些想不断提高自己技术水 ...