avalon视频学习笔记（六）

一、数据缓存

    1、绑定属性ms-data-*

avalon的数据缓存功能与jquery的data()类似，但不同于jquery的是：avalon是直接将数据保存在元素节点上的data-*属性上。

在从data-*属性还原数据时，它会作简单的数据转换，再返回。

在ms-data绑定属性中，对象与数组是直接保存在元素节点上。

    

  1.  <head>
    2. 

  2.   <meta charset="UTF-8">
    3. 

  3.   <meta name="Generator" content="EditPlus?">
    4. 

  4.   <meta name="Author" content="">
    5. 

  5.   <meta name="Keywords" content="">
    6. 

  6.   <meta name="Description" content="">
    7. 

  7.   <title>avalon-ms-data-*</title>
    8. 

  8.   <script type="text/javascript" src="../avalon.min.js"></script>
    9. 

  9.   <script type="text/javascript">
    10. 

  10. 	avalon.ready(function(){
    11. 

  11. 		avalon.define({
    12. 

  12. 			$id:‘text‘,
    13. 

  13. 			number1:111,
    14. 

  14. 			number2:NaN,
    15. 

  15. 			bool:false,
    16. 

  16. 			bool2:true,
    17. 

  17. 			nn:null,
    18. 

  18. 			vv:undefined,
    19. 

  19. 			array:[1,2,3],
    20. 

  20. 			date:new Date,
    21. 

  21. 			object:{
    22. 

  22. 				name:"这是数据"
    23. 

  23. 			},
    24. 

  24. 			show:function(){
    25. 

  25. 				var elem = avalon(this);
    26. 

  26. 				console.log(
    27. 

  27. 					elem.data("number1"),elem.data("number2"),
    28. 

  28. 					elem.data("bool"),elem.data("bool2"),
    29. 

  29. 					elem.data("null"),elem.data("void"),
    30. 

  30. 					elem.data("fn"),this["data-array"],
    31. 

  31. 					this["data-date"],this["data-object"]
    32. 

  32. 				);
    33. 

  33. 				alert(123)
    34. 

    35. 

  35. 			}
    36. 

  36. 		});
    37. 

  37. 		avalon.scan();
    38. 

  38. 	})
    39. 

  39.   </script>
    40. 

  40.  </head>
    41. 

  41.  <body ms-controller="text">
    42. 

  42.   <div 	ms-data-number="number1"
    43. 

  43. 		ms-data-number2="number2"
    44. 

  44. 		ms-data-bool="bool"
    45. 

  45. 		ms-data-bool2="bool2"
    46. 

  46. 		ms-data-void="vv"
    47. 

  47. 		ms-data-null="nn"
    48. 

  48. 		ms-data-array="array"
    49. 

  49. 		ms-data-date="date"
    50. 

  50. 		ms-data-object="object"
    51. 

  51. 		ms-data-fn="show"
    52. 

  52. 		ms-click="show"
    53. 

  53. 	>点我
    54. 

  54.   </div>
    55. 

  55.  </body>
    56.

来自为知笔记(Wiz)

时间： 2024-10-13 19:07:27

avalon视频学习笔记（六）的相关文章

avalon视频学习笔记（三）

一.双向同步,双向绑定ms-duplex     含义:ms-duplex实现了双向数据绑定.双向绑定通俗说,除了负责将ViewModel中的应的值放到表单元素的value中,还对表单元素偷偷绑定一些事情,用于监听用户的输入从而自动刷新ViewModel. 使用场景一: 当元素为text.password.textaera时,要求prop为一个字符串,当我们改动它的内容时,avalon就会将此元素的value值赋给prop. <head> <meta charset="UTF-

avalon视频学习笔记（七）

一.属性操作     DOM操作之属性操作: 1.类名操作<div class="active">    ms-class (1)ms-class a.ms-class="active"    默认写法,为元素添加active样式 b.ms-class="active:isOk"    isOK值为true,添加active,为false,删除active c.ms-class="width{{w}}:isOK" 

avalon视频学习笔记（五）

一.插入移除处理     1.绑定属性ms-if a.当ms-if的值为真(true)时,就将元素输出到页面里面. <div ms-controller="text"> <div ms-if="true"> 根据条件显示内容 </div> </div> <div avalonctrl="test"> <div> 根据条件显示内容 </div> </div&g

avalon视频学习笔记（四）

二.显示隐藏处理 含义:效果类似于jquery的toggle,如果它后面跟着的表达式为真值时则显示它所在的元素,为假值时则隐藏. <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta n

avalon视频学习笔记（一）

一.禁用加载器     方法一:在js文件中书写 avalon.config({ loader: false }) 方法二:在avalon源文件中添加 avalon.config({ loader: false }) 方法三:在源文件中删除amd加载器 二.作用域绑定 含义:作用域范围圈定,在一个页面中需要形成多个模块,每个模块需要实现不同功能. 1.ms-controller 可以互相嵌套的作用域 含义:在页面上表现为一个特殊属性,其属性值为ViewModel的$id,表现将在此元素或者其子孙

avalon视频学习笔记（二）

一.数据填充 含义:将数据打印到页面上,通过绑定属性,将页面变成动态模版 1.插值表达式 {{prop}},{{prop | html}}定界符及自动配置 含义:{{prop}}是对某一文本节点的nodeValue进行修改,因此不会影响兄弟节点,{{prop}}只是表示这个地方可以被替换,在avalon中,它只在文本节点中有效,它不能替换属性节点里的名字,特性节点的名字必须以ms-开头. a.{{prop}} <head> <meta charset="UTF-8"&

老男孩培训视频听课笔记六（在51cto上听的）

有关Centos6.4 x86_64在虚拟机上的安装问题:  1.硬件CPU支持虚拟化技术(前面) 2.创建虚拟机时内存到少大于512M,最好是1G以上 3.安装之后启动虚拟机至少512M内存,否则可能报错 Centos 5.8安装256M即可,启动128M就可以了   Centos 6.4的安装: 1.新建一个虚拟机    新建:c6.4-->nvm-自定义-->8.0-->至后安装系统-->centos 6(other linux 2.6.x kernel 64bit-->

python之raw_input()（学习笔记六）

python之raw_input()(学习笔记六) 我们经常使用raw_input()读取用户的输入,如下例子所示: >>> name = raw_input('please input your name:'),截图如下: 下面简单说下,raw_input()与if搭配使用,脚本如下: #!/usr/bin/env python # -*- coding:utf-8 -*- birth = raw_input('birth:') if birth < 2000: print '0

韩顺平视频学习笔记-简易qq

1 package myclient; 2 3 import java.net.*; 4 import java.util.Date; 5 import java.text.SimpleDateFormat; 6 import java.awt.event.ActionEvent; 7 import java.awt.event.ActionListener; 8 import java.io.*; 9 import java.awt.*; 10 11 import javax.swing.*;