照着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. 通过viewmodel找到view

    如何通过viewmodel找到view? 之前的做法是,在view加载时(Loaded),将view保存到viewmodel中,后来想想Caliburn-Micro,自带方法可以通过viewmodel ...

  2. 遇到的sql关键字

    select count(1)  相当于  select count(*)  网上有比较差别的 菜鸟不用管

  3. sql sever获取数据库还原时间语句

    --只获取数据库名称和最后的还原时间 SELECT sdb.Name AS DatabaseName , ), ), '-') AS LastBackUpTime FROM sys.sysdataba ...

  4. Android自定义View的实现方法，带你一步步深入了解View(四)

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17357967 不知不觉中,带你一步步深入了解View系列的文章已经写到第四篇了,回 ...

  5. BeanUtils: 威力和代价(转载)

    转自:http://blog.sina.com.cn/s/blog_ab3fbf1b0101jbxz.html Apache Jakarta Commons项目非常有用.我曾在许多不同的项目上或直接或 ...

  6. angularjs的四大特征

    angularjs四大特性: 1.MVC模式: Model:数据,其实就是angular变量($scope.XX,$rootScope.XX); View:数据的呈现,Html+Directive(指 ...

  7. mysql删除开放用户权限

    来访用户ODBC 1,在本地的cmd中用root用户进入mysql2,创建一个ODBC的用户create user 'ODBC'@'localhost';查看用户是否创建成功select user,h ...

  8. js压缩

    1:用cmd命名 1.1:cmd下执行命令:"copy dialog.js+menu.js abc.js/b",则会合并dialog合menu两个js到新生成的abc.js; 1. ...

  9. viewpage 循环滑动播放图片

    一般来说,viewpage 只支持图片的顺序滑动播放,在滑到边界时就再也滑不动了,如果要想继续滑动,只能向两边额外增加一张相片,即把第一张相片的位置放在最后一张图片的后面,给用户的感觉我继续滑就滑到了 ...

  10. 1、在MAC上搭建React Native开发环境

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...