avalon视频学习笔记（六）

一、数据缓存
    1、绑定属性ms-data-*
        avalon的数据缓存功能与jquery的data()类似，但不同于jquery的是：avalon是直接将数据保存在元素节点上的data-*属性上。
        在从data-*属性还原数据时，它会作简单的数据转换，再返回。
        在ms-data绑定属性中，对象与数组是直接保存在元素节点上。
  1.  <head>
  2.   <meta charset="UTF-8">
  3.   <meta name="Generator" content="EditPlus®">
  4.   <meta name="Author" content="">
  5.   <meta name="Keywords" content="">
  6.   <meta name="Description" content="">
  7.   <title>avalon-ms-data-*</title>
  8.   <script type="text/javascript" src="../avalon.min.js"></script>
  9.   <script type="text/javascript">
  10. 	avalon.ready(function(){
  11. 		avalon.define({
  12. 			$id:'text',
  13. 			number1:111,
  14. 			number2:NaN,
  15. 			bool:false,
  16. 			bool2:true,
  17. 			nn:null,
  18. 			vv:undefined,
  19. 			array:[1,2,3],
  20. 			date:new Date,
  21. 			object:{
  22. 				name:"这是数据"
  23. 			},
  24. 			show:function(){
  25. 				var elem = avalon(this);
  26. 				console.log(
  27. 					elem.data("number1"),elem.data("number2"),
  28. 					elem.data("bool"),elem.data("bool2"),
  29. 					elem.data("null"),elem.data("void"),
  30. 					elem.data("fn"),this["data-array"],
  31. 					this["data-date"],this["data-object"]
  32. 				);
  33. 				alert(123)
  35. 			}
  36. 		});
  37. 		avalon.scan();
  38. 	})
  39.   </script>
  40.  </head>
  41.  <body ms-controller="text">
  42.   <div 	ms-data-number="number1"
  43. 		ms-data-number2="number2"
  44. 		ms-data-bool="bool"
  45. 		ms-data-bool2="bool2"
  46. 		ms-data-void="vv"
  47. 		ms-data-null="nn"
  48. 		ms-data-array="array"
  49. 		ms-data-date="date"
  50. 		ms-data-object="object"
  51. 		ms-data-fn="show"
  52. 		ms-click="show"
  53. 	>点我
  54.   </div>
  55.  </body>





posted @ 2015-04-25 20:02  静文  阅读(142)  评论(0)    收藏  举报