本版本最大的改进是引进了ms-with绑定，现在可轻松遍历对象了。

改进列表如下：

  • 重新使用082的scanNodes方法，因为有关旧式IE下UI渲染锁死的问题已经解决了。
  • 优化each绑定与Collection
  • 添加CSS3 animationend事件支持
  • 添加ms-with绑定
  • fix IE9-10获取option元素的value的BUG
  • 改良 AMD加载器与jQuery这些在内部使用了全局define方法的库的兼容问题
  • 抽象setNumber方法来处理splice,slice这两个数组方法的参数
  • 分割Configue, AMDLoad, DomReady等模块，让框架的可读性更强

ms-with语法为 ms-with="obj" 子元素里面用$key, $val分别引用键名，键值

例子：

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script type='text/javascript' src="avalon.js"></script>

        <script>

            var a = avalon.define("xxx", function(vm) {

                vm.obj = {

                    aaa: "xxx",

                    bbb: "yyy",

                    ccc: "zzz"

                }

                vm.first = "司徒正美"

            })

            setTimeout(function() {

                a.obj.aaa = "7777777777"

                a.first = "清风火忌"

            }, 1000)

            setTimeout(function() {

                a.obj.bbb = "8888888"

            }, 3000)

        </script>

    </head>

    <body ms-controller="xxx">

        <div ms-with="obj">

            <div>{{$key}} {{$val}}</div>

        </div>

        <hr/>

        <div ms-with="obj">

            <div>{{$key}} {{$val}}</div>

        </div>

        <hr/>

        <div ms-with="obj">

            <div>{{$key}} {{$val}}</div>

        </div>

    </body>

</html>

它在chrome的截图：

它在IE10的截图：

它在IE6下完美运行的截图：

CSS3 animationend事件的例子：

<!DOCTYPE html>
<html>
<head>
<title>by 司徒正美</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://rubylouvre.github.io/mvvm/javascripts/avalon.js"></script>
<link rel="stylesheet" type="text/css" href="http://rubylouvre.github.io/mvvm/stylesheets/animations.css" />

<style>

.panels div:nth-child(1){
background:green;
}
.panels div:nth-child(2){
background:blue;
}
.panels div:nth-child(3){
background:violet;
}
.panels div:nth-child(4){
background:red;
}
.parent{
width:800px;
height:400px;
overflow: hidden;
position: relative;
}
.pt-perspective {
position: relative;
width: 90%;
height: 90%;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
perspective: 1200px;
}

.pt-page {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.pt-page-current {
visibility: visible;
z-index: 1;
}

.pt-page-ontop {
z-index: 999;
}
</style>
<script>
avalon.ready(function() {

var outClass, inClass, pages, lock = 0, lastIndex = 0//这个是动画的持续时间
avalon.define("apphopeui", function(vm) {
vm.panels = [0, 1, 2, 3]
vm.currentPageIndex = 0;

vm.changePanelIndex = function() {
if (!lock) {
lock = 1
var index = this.$vmodel.$index;
if(lastIndex !== index){
lastIndex = index
vm.currentPageIndex = index;
}else{
lock = 0
}
}
}
vm.removeClass = function() {
lock++
var className = this.animClass;
if (className === outClass) {
this.classList.remove("pt-page-current")
}
var el = this
className.replace(/[\w-]+/g, function(c) {
el.classList.remove(c)
})

if(lock == 3){
lock = 0;
}
}
vm.$watch("currentPageIndex", function(next, curr) {

if (next > curr) {
outClass = 'pt-page-moveToLeftFade';
inClass = 'pt-page-rotateUnfoldRight';
} else {
outClass = 'pt-page-moveToRightFade';
inClass = 'pt-page-rotateUnfoldLeft';
}

var currPage = pages[curr]
var nextPage = pages[next]

currPage.animClass = outClass;
outClass.replace(/[\w-]+/g, function(c) {
currPage.classList.add(c)
})

currPage.classList.add("pt-page-current")

nextPage.animClass = inClass
inClass.replace(/[\w-]+/g, function(c) {
nextPage.classList.add(c)
})
nextPage.classList.add("pt-page-current")

})

})

avalon.scan()
avalon.nextTick(function() {//因为页面只有一个切换板做模板，只有扫描后才动态生成四个
pages = document.querySelectorAll(".panels>div")
})

})

</script>
</head>
<body ms-controller="apphopeui">

<div class="tabs" ms-each-elem="panels">
<button type="button" ms-click="changePanelIndex">按钮{{$index}}</button>
</div>
<br/>
<div class="parent">
<div class="panels pt-perspective" ms-each-el="panels">
<div class="pt-page" ms-class-pt-page-current="0 == $index" ms-animationend="removeClass" >
面板{{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}}
{{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}}
{{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}}
{{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}}
{{$index}} {{$index}} {{$index}} {{$index}} {{$index}} 司徒正美 {{$index}} {{$index}} {{$index}}
{{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}}
</div>
</div>
</div>
</body>
</html>

运行代码

迷你MVVM框架在github的仓库https://github.com/RubyLouvre/avalon

官网地址http://rubylouvre.github.io/mvvm/

入门教程http://www.cnblogs.com/rubylouvre/p/3181291.html

迷你MVVM框架 avalonjs 0.9发布的更多相关文章

  1. 迷你MVVM框架 avalonjs 0.95发布

    迷你MVVM框架 avalonjs 0.95发布 本版本最主要的改进是ms-with 深层绑定的实现,至少,avalon1.0所有重要的feature已经开发完毕,之后就是小补小漏,性能优化了. ms ...

  2. 迷你MVVM框架 avalonjs 0.85发布

    迷你MVVM框架 avalonjs 0.85发布 本版本对循环绑定做了巨大改进,感谢@soom, @limodou, @ztz, @Gaubee 提供的大量测试文件. fix scanNodes, 在 ...

  3. 迷你MVVM框架 avalonjs 0.82发布

    迷你MVVM框架 avalonjs 0.82发布 本版本最大的改进是启用全新的parser. parser是用于干什么的?在视图中,我们通过绑定属性实现双向绑定,比如ms-text="fir ...

  4. 迷你MVVM框架 avalonjs 0.8发布

    本版本最重要的特性是引进了AMD规范的模块加载器,亦即原来mass Framework 的并行加载器, 不同之处,它引进了requirejs的xxx!风格的插件机制,比如要延迟到DOM树建完时触发,是 ...

  5. 迷你MVVM框架 avalonjs 0.99发布

    在本版本主要是性能优化,添加一些有用的功能(如回调什么的),离成品阶段不远了. 修正 updateViewModel bug 修正监控数组的set方法 bug 添加data-each-rendered ...

  6. 迷你MVVM框架 avalonjs 0.91发布

    本版本修了一些BUG与不合理的地方,感谢感谢ztz, 民工精髓, 姚立, qiangtou等人指正. 处理AMD加载 旧式IE下移除script节点内存泄漏的问题 fix firefox 全系列vis ...

  7. 迷你MVVM框架 avalonjs 0.92发布

    本版本最大的改进是引入ms-class的新风格支持,以前的不支持大写类名及多个类名同时操作,新风格支持了.还有对2维监控数组的支持.并着手修复UI框架. 重构 class, hover, active ...

  8. 迷你MVVM框架 avalonjs 0.93发布

    这段时间吸取@limodou, @东灵等人的意见,做了以下改进 重构isArrayLike,提高avalon.each的性能,原来avalon.each是依赖于isArrayLike来判定是循环普通对 ...

  9. 迷你MVVM框架 avalonjs 0.94发布

    本版本主要做了如下改进: 优化ms-if的逻辑,现在描述DOM的顺序是 ms-skip, ms-important, ms-controller, ms-if ... 只要元素存在ms-skip 这个 ...

随机推荐

  1. 使用axios 报 name.toUpperCase is not a function

    使用axios 报 name.toUpperCase is not a function 可能是许久没有用vue了,有些生疏,加上尝试之前总结的思路,这次在项目上实现时,碰到的问题.让人有些懵,不知所 ...

  2. 微信支付 WeixinJSBridge is not defined 报错

    https://www.cnblogs.com/ottoman/p/7614419.html 我没有用到微信JS-SDK或者接口都正确返回预支付id都正确, 为什么会报这个错呢?答: 微信内置浏览器会 ...

  3. hdu 3268 09 宁波 现场 I - Columbus’s bargain 读题 最短路 难度:1

    Description On the evening of 3 August 1492, Christopher Columbus departed from Palos de la Frontera ...

  4. 分析hello.java文件

    使用JavaServer Faces技术的Web模块示例 1.hello1: hello1应用程序是一个web模块,它使用JavaServer Faces技术来显示问候和响应.可以使用文本编辑器查看应 ...

  5. Scrum立会报告+燃尽图（3）选题

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2193 一.小组介绍 组长:刘莹莹 组员:朱珅莹 孙韦男 祝玮琦 王玉潘 ...

  6. linux内存查看工具

    这里帮你总结了一下Linux下查看内存使用情况的多种方法~ 在做 Linux 系统优化的时候,物理内存是其中最重要的一方面.自然的,Linux 也提供了非常多的方法来监控宝贵的内存资源的使用情况.下面 ...

  7. SoftMax多分类器原理及代码理解

    关于多分类 我们常见的逻辑回归.SVM等常用于解决二分类问题,对于多分类问题,比如识别手写数字,它就需要10个分类,同样也可以用逻辑回归或SVM,只是需要多个二分类来组成多分类,但这里讨论另外一种方式 ...

  8. 史上最全的maven的pom.xml文件详解（转载）

    此文出处:史上最全的maven的pom.xml文件详解——阿豪聊干货 <project xmlns="http://maven.apache.org/POM/4.0.0" x ...

  9. ubuntu 通过ssh上传/下载服务器文件

    1.用ssh登录远程ubuntu主机 (主机ip为:1.2.3.4;用户名:username) ssh username@1.2.3.4 2.从远程ubuntu主机copy文件/文件夹到本地(scp) ...

  10. Python协程 Gevent Eventlet Greenlet

    https://zh.wikipedia.org/zh-cn/%E5%8D%8F%E7%A8%8B 协程可以理解为线程中的微线程,通过手动挂起函数的执行状态,在合适的时机再次激活继续运行,而不需要上下 ...