avalon视频学习笔记（五）

一、插入移除处理

    1、绑定属性ms-if

a、当ms-if的值为真（true）时，就将元素输出到页面里面。

    

  1. <div ms-controller="text">
    2. 

  2.  <div ms-if="true">
    3. 

  3.    根据条件显示内容
    4. 

  4.  </div>
    5. 

  5. </div>
    6. 



    

  1. <div avalonctrl="test">
    2. 

  2.  <div>
    3. 

  3.   根据条件显示内容
    4. 

  4.  </div>
    5. 

  5. </div>
    6.

b、如果当ms-if 的值为假（flase）时，就将元素移除dom树

    

  1. <div ms-controller="text">
    2. 

  2.  <div ms-if="flase">
    3. 

  3.   根据条件显示内容
    4. 

  4.  </div>
    5. 

  5. </div>
    6. 



    

  1. <div avalonctrl="test">
    2. 

  2.  <!--ms-if-->
    3. 

  3. </div>
    4.

avalonctrl是为avalon垃圾回收器查找元素所用

<!--ms-if-->是为了将注释的节点重新，装填会dom树所准备的

2、ms-if和ms-visible的区别

    

  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>avaon-ms-if</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. 		var vmodel = avalon.define({
    12. 

  12. 			$id:‘test‘,
    13. 

  13. 			object:{}
    14. 

    15. 

  15. 		});
    16. 

  16. 		
    17. 

  17. 		setTimeout(function(){
    18. 

  18. 			vmodel.object = {
    19. 

  19. 				id:"123",
    20. 

  20. 				message:"显示！！"
    21. 

  21. 			}
    22. 

  22. 		},3000);
    23. 

    24. 

  24. 		avalon.scan()
    25. 

  25. 	});
    26. 

  26.   </script>
    27. 

  27.  </head>
    28. 

  28.  <body>
    29. 

  29. 	<div ms-controller="test">
    30. 

  30. 		这里是比较输出的结果{{object.id != null}}
    31. 

  31. 		<div ms-visible="object.id != null">这里是visible的<span>{{object.message}}</span></div>
    32. 

  32. 		<div ms-if="object.id != null">这里是if的<span>{{object.message}}</span></div>
    33. 

  33. 	</div>
    34. 

  34.  </body>
    35.

*打开代码调试工具，可以发现

ms-if是不占用dom节点的，是通过插入删除来控制节点。

ms-visible是占用dom节点的，是通过display：none和display：block，在dom节点中添加动态样式来控制节点的。

ms-if比ms-visible更高效

3、用ms-if来制作toggle选项卡

    

  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-if-toggle</title>
    8. 

  8.   <style type="text/css">
    9. 

  9. 	div div{
    10. 

  10. 		width:200px;
    11. 

  11. 		height:100px;
    12. 

  12. 	}
    13. 

  13. 	div.d1{
    14. 

  14. 		background:red;
    15. 

  15. 	}
    16. 

  16. 	div.d2{
    17. 

  17. 		background:green;
    18. 

  18. 	}
    19. 

  19. 	div.d3{
    20. 

  20. 		background:blue;
    21. 

  21. 	}
    22. 

  22.   </style>
    23. 

  23.   <script type="text/javascript" src="../avalon.min.js"></script>
    24. 

  24.   <script type="text/javascript">
    25. 

  25. 	avalon.ready(function(){
    26. 

  26. 	var vm = avalon.define({
    27. 

  27. 			$id:‘text‘,
    28. 

  28. 			show:1,
    29. 

  29. 			but:function(index){
    30. 

  30. 				vm.show=index;
    31. 

  31. 			}
    32. 

  32. 		});
    33. 

  33. 		avalon.scan();
    34. 

  34. 	})
    35. 

  35.   </script>
    36. 

  36.  </head>
    37. 

  37.  <body>
    38. 

  38. 	<div ms-controller="text">
    39. 

  39. 		<button ms-click="but(1)">红</button>
    40. 

  40. 		<button ms-click="but(2)">绿</button>
    41. 

  41. 		<button ms-click="but(3)">蓝</button>
    42. 

  42. 		<div class="d1" ms-if="show===1"></div>
    43. 

  43. 		<div class="d2" ms-if="show===2"></div>
    44. 

  44. 		<div class="d3" ms-if="show===3"></div>
    45. 

  45. 	</div>
    46. 

  46.  </body>
    47.

来自为知笔记(Wiz)

时间： 2024-10-14 15:03:06

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

avalon视频学习笔记（三）

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

avalon视频学习笔记（六）

一.数据缓存     1.绑定属性ms-data-* avalon的数据缓存功能与jquery的data()类似,但不同于jquery的是:avalon是直接将数据保存在元素节点上的data-*属性上. 在从data-*属性还原数据时,它会作简单的数据转换,再返回. 在ms-data绑定属性中,对象与数组是直接保存在元素节点上. <head> <meta charset="UTF-8"> <meta name="Generator" c

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视频学习笔记（四）

二.显示隐藏处理 含义:效果类似于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"&

深度学习笔记(五)：LSTM

深度学习笔记(一):logistic分类 深度学习笔记(二):简单神经网络,后向传播算法及实现 深度学习笔记(三):激活函数和损失函数 深度学习笔记(四):循环神经网络的概念,结构和代码注释 深度学习笔记(五):LSTM 看到一篇讲LSTM非常清晰的文章,原文来自Understanding LSTM Networks , 译文来自理解LSTM网络 Recurrent Neural Networks 人类并不是每时每刻都从一片空白的大脑开始他们的思考.在你阅读这篇文章时候,你都是基于自己已经拥有的

Caliburn.Micro学习笔记(五)----协同IResult

Caliburn.Micro学习笔记(五)----协同IResult 今天说一下协同IResult 看一下IResult接口 /// <summary> /// Allows custom code to execute after the return of a action. /// </summary> public interface IResult { /// <summary> /// Executes the result using the specif

韩顺平视频学习笔记-简易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.*;