Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

xlws2002/avalon

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

502 Commits

Repository files navigation

Avalon

迷你简单易用的MVVM框架


  • avalon.js 兼容IE6,及标准浏览器
  • avalon.mobile.js 则只支持IE10及其以上版本,及标准浏览器

优势

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

相关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()
})

About

迷你简单易用的MVVM框架

Resources

License

Stars

Watchers

Forks

Packages

Contributors

AltStyle によって変換されたページ (->オリジナル) /