Avalon

迷你简单易用的MVVM框架

---

• avalon.js 兼容IE6，及标准浏览器
• avalon.mobile.js 则只支持IE10及其以上版本，及标准浏览器
• 想使用路由器，可以用mmRouter， 想使用动画，可以用mmAnimate， 想使用AJAX，可以用mmRequest

优势

• 使用简单，在HTML中添加绑定，在JS中用avalon.define定义ViewModel，再调用avalon.scan方法，它就能动了！
• 兼容到IE6(其他mvvm框架， knockoutjs IE6, angularjs IE8, emberjs IE8, winJS IE9 )，另有avalon.mobile，它可以更高效地运行于IE10等新版本浏览器中
• 没有任何依赖，不到4000行，压缩后不到50KB
• 支持管道符风格的过滤函数，方便格式化输出
• 局部刷新的颗粒度已细化到一个文本节点，特性节点
• 要操作的节点，在第一次扫描就与视图刷新函数相绑定，并缓存起来，因此没有选择器出场的余地。
• 让DOM操作的代码近乎绝迹
• 使用类似CSS的重叠覆盖机制，让各个ViewModel分区交替地渲染页面
• 节点移除时，智能卸载对应的视图刷新函数，节约内存
• 操作数据即操作DOM，对ViewModel的操作都会同步到View与Model去。
• 自带AMD模块加载器，省得与其他加载器进行整合。

相关学习教程:《入门教程》→官网→ HTML5交流会有关avalon的PPT→《avalon最佳实践》

大家也可以在新浪微博第一时间了解它的变更或各种秘笈分享！

        <fieldset ms-controller="simple">
            <legend>例子</legend>
            <p>First name: <input ms-duplex="firstName" /></p>
            <p>Last name: <input ms-duplex="lastName"  /></p>
            <p>Hello,    <input ms-duplex="fullName"></p>
            <div>{{firstName +" | "+ lastName }}</div>

        </fieldset>

avalon.ready(function() {
    avalon.define("simple", function(vm) {
        vm.firstName = "司徒"
        vm.lastName = "正美"
        vm.fullName = {//一个包含set或get的对象会被当成PropertyDescriptor，
            set: function(val) {//里面必须用this指向scope，不能使用scope
                var array = (val || "").split(" ");
                this.firstName = array[0] || "";
                this.lastName = array[1] || "";
            },
            get: function() {
                return this.firstName + " " + this.lastName;
            }
        }
    });
    avalon.scan()
})