照着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. MCMC and Bayesian Data Analysis(PPT在文件模块)

    How to generate a sample from $p(x)$? Let's first see how Matlab samples from a $p(x)$. In Matlab, t ...

  2. WIN7系统中设置默认登录用户

    新建账户,如果不删除之前的账户,会每次登录都要选择一个账户登录系统,非常麻烦,而且之前的administrator账户不能删除. 单机开始菜单,选择运行,键入“control userpassword ...

  3. 时间管理的若干Tips

    时间管理的若干Tips 记下来 再好的记性也不如一支笔与一个本子. 买一支好点的笔于一个好点的本子,让自己有书写的欲望,将todo事项记下来. 小目标 太大太远的目标会使人气馁.通过将大目标分解再分解 ...

  4. spring官网改版后，如何下载jar包

    http://repo.springsource.org/libs-release-local/org/springframework 通过以上地址,可树型查看所有发布的包 问题是,官网页面上为何找不 ...

  5. 异常:System.Data.EvaluateException: 未找到列[District].

    异常:System.Data.EvaluateException: 未找到列[District]. 这里存在的问题不一定是说,数据源表没有该字段.此问题在于数据库字段包含空格字符.

  6. 蓄水池算法（Reservoir Sampling）

    蓄水池算法是一种随机算法,可以形象的描述为从一个n维的list中选取k个元素,其中n是一个很大的数或者n是一个未知的数,而且一般n很大使得不会将list存在主存中. 解法: i = 0 while m ...

  7. VS非web项目使用Transformation配置文件

    Web项目中的Transformation使用起来非常方便,特别是本地与服务器情况不一致时调试下以及webdeploy的配合使用. 步骤: 1. 在项目中新建App.Debug.Config及App. ...

  8. Java Environment Setting

    As a non-Java developer, I am quit stuck in Java environment setting because I am not familiar with ...

  9. PROC SORT

    PROC SORT DATA=输入数据集 <OUT=输出数据集><选项>; BY 关键变量; RUN; PROC SORT 语法如上,其中在尖括号中的可以不出现,也不会报错. ...

  10. QT

    http://www.cnblogs.com/csulennon/p/4483711.html