1>复选卡框和单选框
复选卡框
监控已选框的数组，即通过属性监控来判断是否全选
<div ms-controller="test"> <ul> <li>{{isAllChecked}}全选 <input type="checkbox" ms-attr-checked="isAllChecked" ms-click="checkAll" /> </li> <li ms-repeat="arr">{{el}}<input type="checkbox" ms-attr-value="el" ms-duplex="selected" /></li> </ul> </div> <script src="avalon.min.js" type="text/javascript"></script> <script type="text/javascript"> var vm = avalon.define({ $id: "test", arr: ["1", "2", "3", "4", "5"], selected: ["1", "5"], isAllChecked: false, checkAll: function () { if (this.checked) { vm.selected = vm.arr; } else { vm.selected.clear(); } } }); vm.isAllChecked = vm.selected.length == vm.arr.length; vm.selected.$watch("length", function (n) { vm.isAllChecked = n === vm.arr.length; }); </script>
添加bool属性checked属性，将属性值绑定到"ms-duplex-checked"
<div ms-controller="test"> <ul> <li ms-repeat="arr"><input type="checkbox" ms-duplex-checked="el.checked" />{{el.sex}}</li> </ul> </div> <script src="avalon.min.js" type="text/javascript"></script> <script type="text/javascript"> var vm = avalon.define({ $id: "test", arr: [{sex:"男",checked:false},{sex:"女",checked:false}] }); </script>
单选的click事件触发的时候来判断是否全选。
<!DOCTYPE html>
<html>
<head>
<title>ms-duplex</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div ms-controller="box">
<ul>
<li>
<input type="checkbox" ms-click="checkAll" ms-checked="checkAllbool" />全选</li>
<li ms-repeat="arr">
<input type="checkbox" ms-value="el" ms-duplex="selected" />{{el}}</li>
</ul>
</div>
<script src="avalon.js"></script>
<script>
var vm = avalon.define({
$id: "box",
arr: ["1", '2', "3", "4"],
selected: ["2", "3"],
checkAllbool: false,
checkAll: function () {
if (this.checked) {
vm.selected = vm.arr
} else {
vm.selected.clear()
}
}
})
vm.checkAllbool = vm.arr.length === vm.selected.length
vm.selected.$watch("length", function (n) {
vm.checkAllbool = n === vm.arr.size()
})
</script>
</body>
</html>
单选框
<div ms-controller="test1"> <ul><li ms-repeat="code"> <input type="checkbox" ms-attr-value="el" ms-duplex="checked" ms-click="click" /> </li> </ul> </div> <script src="avalon.min.js" type="text/javascript"></script> <script type="text/javascript"> var model2 = avalon.define({ $id: "test1", code: ["1", "2", "3"], checked: [], click: function () { model2.checked.clear(); model2.checked.push(this.value); } }); </script>
2>下拉框
<div ms-controller="test"> {{selectedVal}} <select ms-each="arr" ms-duplex="selectedVal"> <option ms-attr-value="el.val">{{el.key}}</option> </select> </div> <script src="avalon.min.js" type="text/javascript"></script> <script type="text/javascript"> var vm = avalon.define({ $id: "test", arr: [{ key: "是", val: "1" }, { key: "否", val: "0"}], selectedVal: "0" }); </script>
3>格式化
即过滤器：它只能用于{{}}插值表达式。如果不存在参数，要求直接跟|filter，如果存在参传，则要用小括号括起，参数要有逗号
数字格式化：
number(decimals, dec_point, thousands_sep)
decimals ：可选，规定多少个小数位。
dec_point： 可选，规定用作小数点的字符串（默认为 . ）。
thousands_sep：可选，规定用作千位分隔符的字符串（默认为 , ），如果设置了该参数，那么所有其他参数都是必需的。
实例：
{{666.8888|number(2)}}
时间格式化
{{ new Date | date("yyyy-MM-dd:HH:mm:ss")}}
{{ "2011-07-08" | date("yyyy-MM-dd HH:mm:ss")}}
{{ "2011 07" | date("yyyy-MM-dd HH:mm:ss")}}
转义
对类似于HTML格式的字符串进行转义，把尖括号转换为> <
{{"<>"|escape}}
4>循环绑定
- el: 不一定叫这个名字，比如说ms-each-item，它就变成conitem了。默认为el。指向当前元素。
- $first: 判定是否为监控数组的第一个元素
- $last: 判定是否为监控数组的最后一个元素
- $index: 得到当前元素的索引值
- $outer: 得到外围循环的那个元素。
- $remove：这是一个方法，用于移除此元素
- length:获取数组对象的个数,如：obj.items.length
5>作用域绑定(ms-controller, ms-important)
ms-controller：如果当前ViewModel没有此字段 就找上一级ViewModel的同名字段
ms-important：强制这个区域使用此ViewModel，不再往上查找同名属性或方法
<div ms-controller="AAA"> <div> ms-controller属性： 有color{{name}} : {{color}}</div> <div ms-controller="BBB"> <div> ms-controller属性： 有color {{name}} : {{color}}</div> <div ms-controller="CCC"> <div> ms-controller属性： 无color {{name}} : {{color}}</div> </div> <div ms-important="DDD"> <div> ms-important属性： 无color {{name}} : {{color}}</div> </div> </div> </div> <script type="text/javascript"> avalon.define({ $id: "AAA", name: "1_liger", color: "1_green" }); avalon.define({ $id: "BBB", name: "2_sphinx", color: "2_red" }); avalon.define({ $id: "CCC", name: "31_dragon" //不存在color }); avalon.define({ $id: "DDD", name: "32_sirenia" //不存在color }); </script>
6>计算属性
计算属性：定义时为一个对象，并且只存在set,get两个函数或只有一个get函数。它是监控属性的高级形式，表示它的值是通过函数计算出来的，是依赖于其他属性合成出来的。
<div ms-controller="test"> firstName: <input type="text" ms-duplex="firstName" /><br /> lastName: <input type="text" ms-duplex="lastName" /><br /> fullName：<input type="text" ms-duplex="fullName" /> </div> <script src="avalon.min.js" type="text/javascript"></script> <script type="text/javascript"> avalon.define({ $id: "test", firstName: "firstName", lastName: "lastName", fullName: { set: function (val) { var valArr = val.split(' '); this.firstName = valArr[0]; if (valArr[1] == undefined) { this.lastName = ""; } else { this.lastName = val.split(' ')[1]; } }, get: function () { return this.firstName + " " + this.lastName; } } }); </script>
7>使用ajax获取数据
通过jQuery异步获取数据
blog_info.json
{"subject": "Blog Title","author": "张三","publish_date": "2014/3/15","comment_count": 0,"content": "<h2>这是一个测试的博客</h2><p>这是内容 1</p><p>这是内容 2</p><p>这是内容 3</p><p>这是内容 4</p>"}
<script> var model = avalon.define("blog", function(vm){ vm.blog = {}; }); $(function(){ $.getJSON('blog_info.json').done(function(data){ model.blog = data; }); });
</script>
数据异步提交到后台，用JSON.stringify()函数将json对象转换成字符串，特殊字符被该函数处理后发送到后台,$model去掉模型中所有的函数
<div ms-cntroller="m"> <input type="text" ms-duplex="obj.userId" /> <input type="text" ms-duplex="obj.name" /> </div> <script type="text/javascript"> $(function () { var model = avalon.define({ $id: "", obj: { name: "", userId: "" } }); $("save").click(function () {
$.post("xxx.ashx", { data: JSON.stringify(model.$model.obj) }, function (data) { }); }); }); </script>
8>模块间通信
<div ms-controller="test"> vm1: <input type="text" ms-duplex="code" /> </div> <div ms-controller="test1"> vm2: <input type="text" ms-duplex="code" /> </div> <script src="avalon.min.js" type="text/javascript"></script> <script type="text/javascript"> var model1 = avalon.define({ $id: "test", code: "" }); var model2 = avalon.define({ $id: "test1", code: "1", }); model1.code=model2.code; model2.$watch("code", function (newVal,oldVal) { model1.code=newVal; }); </script>
9>隐藏
显示绑定(ms-visible)
avalon通过ms-visible="bool"实现对某个元素显示隐藏控制，它用是style.display="none"进行隐藏。
插入绑定(ms-if)
这个功能是抄自knockout的，ms-if="bool",同样隐藏，但它是将元素移出DOM
<ul ms-each-item="array"> <li ms-click="$remove" ms-if="$index % 2 == 0">{{ item }} --- {{$index}}</li> </ul> <script type="text/javascript"> avalon.define({ $id: "test", array: "a,b,c,d,e,f,g".split(",") }); </script>
程序员的基础教程：菜鸟程序员
516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
