avalonjs 复选框
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>
单选的click事件触发的时候来判断是否全选。
<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-click="check" 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 = this.checked; }, check: function () { vm.isAllChecked = vm.selected.length === vm.arr.length; } }); </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>格式化
{{ 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")}}
4>循环绑定
- el: 不一定叫这个名字,比如说ms-each-item,它就变成conitem了。默认为el。指向当前元素。
- $first: 判定是否为监控数组的第一个元素
- $last: 判定是否为监控数组的最后一个元素
- $index: 得到当前元素的索引值
- $outer: 得到外围循环的那个元素。
- $remove:这是一个方法,用于移除此元素
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>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。