zoukankan      html  css  js  c++  java
  • avalon复杂绑定

    样式操作:ms-css-样式名=“样式值”,ms-class

    ms-css-width="prop"(自动补px)

    ms-css-height="{{prop}}%"

    ms-css-color="prop"

    ms-css-background-color="prop"

    ms-css-font-size="{{prop}}px"

    注:样式值不能加入css hack和!important

    事件绑定:

    ms-事件名 ms-on-事件名

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>ms-on</title>
    	<script src="avalon.js"></script>
    	<script>
    		avalon.ready(function(){
    			var vm = avalon.define({
    				$id: "test",
    				status: "event-type",
    				feild: "value-event-type",
    				firstname: "yang",
    				arr: ["aaa", "bbb", "ccc"],
    				callback: function(e) {
    					vm.status = e.type;
    				},
    				check: function(e) {
    					vm.feild = this.value + "  " + e.type; 
    				},
    				argsClick: function(e, a, b) {
    					alert([].slice.call(arguments).join(" "));
    				},
    				loopClick: function(a, e) {
    					alert(a+"  "+e.type);
    				},
    				submit: function() {
    					var data = vm.$model;
    					alert(JSON.stringify(data));
    				}
    			});
    			avalon.scan();
    		});
    	</script>
    </head>
    <body>
    	<fieldset ms-controller="test">
    		<legend>有关事件回调传参</legend>
    		<div ms-mouseenter="callback" ms-mouseleave="callback">
    			{{status}}<br />
    			<input ms-on-input="check">{{ feild }}
    		</div>
    		<div ms-click="argsClick($event, 100, firstname)">点我</div>
    		<div ms-each-el="arr">
    			<p ms-click="loopClick(el, $event)">{{el}}</p>
    		</div>
    		<button ms-click="submit">提交</button>
    	</fieldset>
    </body>
    </html>
    

    多重事件绑定:遵循后绑定的事件先执行的规则。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>multi-event-2</title>
    	<script src="avalon.js"></script>
    	<script>
    			var vm = avalon.define({
    				$id: "xxx",
    				fn: function() {
    					console.log("111111");
    				},
    				fn1: function() {
    					console.log("222222");
    				},
    				fn2: function() {
    					console.log("333333");
    				}
    			});
    			
    	</script>
    </head>
    <body>
    	<div ms-controller="xxx" style=" 100px; height: 100px; background: red;" ms-on-mouseenter-3="fn"  ms-on-mouseenter-2="fn2"  ms-on-mouseenter-1="fn1"></div>
    </body>
    </html>
    

    循环操作:数组遍历:ms-repeat-->{{el}},ms-each-->{{el}};对象遍历:ms-repeat-->{{$key}},{{$val}},ms-with-->

    {{$key}},{{$val}}

    注:对ms-repeat而言,ms-repeat-*-->{{*}},如外层ms-repeat-elem,内层可通过{{elem}}访问当前元素

    两者区别:ms-repeat绑定在子元素上,ms-each绑定在父元素上,ms-with绑定在父元素上

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>ms-repeat-each</title>
    	<script src="avalon.js"></script>
    	<script>
    			var vm = avalon.define({
    				$id: "test",
    				arr: ["葡萄","苹果","香蕉","西瓜"]
    			});
    			
    	</script>
    </head>
    <body>
    	<div ms-controller="test">
    		<ul>
    			<li ms-repeat="arr">{{el}}</li>
    		</ul>
    		<ul ms-each="arr">
    			<li>{{el}}</li>
    		</ul>
    	</div>
    </body>
    </html>
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>ms-repeat-each</title>
    	<script src="avalon.js"></script>
    	<script>
    			var vm = avalon.define({
    				$id: "test",
    				arr: ["葡萄","苹果","香蕉","西瓜"],
    				obj: {
    					aaa: "1111",
    					bbb: "2222",
    					ccc: "3333",
    					ddd: "4444"
    				}
    			});
    			
    	</script>
    </head>
    <body>
    	<div ms-controller="test">
    		<ul>
    			<li ms-repeat="obj">{{$key}}--{{$val}}</li>
    		</ul>
    		<ul ms-with="obj">
    			<li>{{$key}}--{{$val}}</li>
    		</ul>
    	</div>
    </body>
    </html>
    

      循环显示数组元素的临时变量:

      el:任何类型,引用着当前循环的元素

      $index:Number,当前循环元素对应的索引值

      $first:Boolean,当前循环元素是否为数组的第一个元素

      $last:Boolean,当前循环元素是否为数组的最后一个元素

      $remove:Function,用于从数组中删除当前循环

      $outer: Object,用于内层循环访问外层循环的变量,内层访问外层{{$outer.$index}}

      循环显示对象的临时变量:

      $key:String,当前循环中的键名

      $val:任何类型,当前循环中的键值

      $outer:Object,用于内层循环访问外层循环的变量

      数据的更新:

      对象的更新:obj.key = newVal

      数组的更新:简单值更新:arr.set(index, newVal)

            对象值更新:arr[i].key = newVal

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>update-model</title>
    	<script src="avalon.js"></script>
    	<script>
    			var vm = avalon.define({
    				$id: "test",
    				data: {
    					aaa: 111,
    					bbb: 222,
    					ccc: 333,
    					ddd: 444
    				},
    				arr1: ['a','b','c'],
    				arr2: [{text: 'a'},{text: 'b'},{text: 'c'}]
    			});
    			setTimeout(function() {
    				vm.data.aaa = 555;
    			}, 2000);
    			setTimeout(function() {
    				vm.data = {
    					ddd: 111,
    					eee: 222
    				};
    			}, 3000);
    			setTimeout(function() {
    				vm.arr1.set(0,"changed");
    			}, 4000);
    			setTimeout(function() {
    				vm.arr2[0].text = "changed";
    			}, 5000);
    	</script>
    </head>
    <body ms-controller="test">
    	<h1>数据的更新:</h1>
    	<ul>
    		<li ms-repeat="data">{{$key}}--{{$val}}</li>
    	</ul>
    	<ul>
    		<li ms-repeat="arr1">{{el}}</li>
    	</ul>
    	<ul>
    		<li ms-repeat="arr2">{{el.text}}</li>
    	</ul>
    </body>
    </html>
    

     回调绑定属性:

     data-repeat-rendered 当前操作名(add,del,move,append,clear),用ms-repeate绑定,当监控数组发生添加、删除、重排等操作时触发

     data-with-sorted 原对象的所有键名构成数组,用ms-repeat,ms-with绑定,赶在对象渲染之前触发,要求输出一个字符串数组,对象的键值对会根据它一次输出

     data-with-rendered 当前操作名(append),用ms-with绑定,当前目标对象输出页面后触发

     data-each-rendered 当前操作名(add,del,move),用ms-each绑定,当监控数组发生添加、删除、重排等操作时触发

     数组长度与循环分支判断:

     获取数组长度:使用size方法,不使用length属性

     循环分支判断:使用ms-if-loop判定属性,不能使用ms-if,因为ms-if先于ms-repeat执行的

      监控数组方法:

     push,pushAll,shift,unshift,pop,clice,remove,removeAt,removeAll,clear,ensure,sort,reverse,set

     用法:vm.array.push或vm.array[push]

     avalon模板类型:

     嵌入到页面的模板:ms-include="expr"

     独立成子页面的模板:ms-include-src="expr"

  • 相关阅读:
    Django对静态文件的处理——部署阶段
    使用Django来处理对于静态文件的请求
    Django1.7如何配置静态资源访问
    Spring WebSocket中403错误解决
    FastJSON JSONObject 字段排序 Feature.OrderedField
    国际化(i18n) 各国语言缩写
    【转】java.io.Closeable接口
    【转】spring bean 卸载
    This content should also be served over HTTPS
    Failed to close the ServletOutputStream connection cleanly, Broken pipe
  • 原文地址:https://www.cnblogs.com/rellame/p/5688767.html
Copyright © 2011-2022 走看看