照着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. windows获取硬盘使用率等信息

    #coding=utf8 import psutil cpu = {'user' : 0, 'system' : 0, 'idle' : 0, 'percent' : 0} mem = {'total ...

  2. vios 虚拟光驱 安装vioc

    一.VIO server 创建虚拟光驱 1 检查是否创建Library $lsrep 2 创建 VMLibrary :vg 和size都可以自己定义 $mkrep -sp rootvg -size 1 ...

  3. 浅谈SDN和NFV之间的关系

    一个行业固定设备的折旧周期很长,任何变革的发生都绝非易事,但是网络却一次性面临两项革新--软件定义网络(SDN)和网络功能虚拟化(NFV),在变革网络的过程中,二者若想取得成功可能会依赖彼此的技术,或 ...

  4. css高级应用及问题记录（持续更新）

    css 参考手册: 1.http://css.doyoe.com/ 1.混合选择器样式定义: .button.icon:before {    content: "";    po ...

  5. webservice jsonp格式调用

    前端  $.ajax({            type: "get",            url: "http://baiduzd.yihu.com.cn/APIS ...

  6. javascript高级特性

    01_javascript相关内容02_函数_Arguments对象03_函数_变量的作用域04_函数_特殊函数05_闭包_作用域链&闭包06_闭包_循环中的闭包07_对象_定义普通对象08_ ...

  7. python 使用字符串名调用类以及调用类方法名

    在python中,有时调用者仅知道类名和类方法,不负责实际的函数调用,而是将要调用的类名和类方法告诉一个中间函数,由中间函数负责实际调用函数.中间函数需以被告知的字符串调用类和类方法.         ...

  8. php图片合成

    <?php//===================== 新建一个新的 GD 图像流并输出图像========================//header("Content-typ ...

  9. windows环境下修改Mysql的root密码

    最近一直没用Mysql,root密码给忘了,然后就自己修改了一下,现在整理一下步骤.(我的版本是5.1) 启动MySQL服务:>>net start mysql 关闭MySQL服务:> ...

  10. Win7 64位 VS2013环境编译Lua5.3.1

    主要参考这篇文章,原文有几个错误顺便改正了. 在Windows下使用Visual Studio编译Lua5.3 写本文时Lua官方网站放出的新版本为5.3.1,然后我不知道为啥,神奇的国内不能访问Lu ...