您的位置：首页 > Web前端 > JavaScript

迷你MVVM框架 avalonjs 0.9发布

2013-07-20 09:06 363 查看

本版本最大的改进是引进了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/

入门教程/content/5948834.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航