14avalon - 指令ms-controller (controller绑定)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_20042935/article/details/89327759

ms-contoller介绍

ms-contoller这个指令是用于圈定某个VM的作用域范围(换言之,这个元素的outerHTML会被扫描编译,所有ms-*及双花括号替换成vm中的内容),ms-controller的属性值只能是某个VM的$id

注意:

  1. ms-controller的元素节点下面的其他节点也可以使用ms-controller
  2. 每个VM的$id可以在页面上出现一次, 因此不要在ms-for内使用ms-controller.
  3. 当我们在某个指令上用@aaa时,它会先从其最近的ms-controller元素上找, 找不到再往其更上方的ms-controller元素

在这里插入图片描述

代码例子

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>

		<script type="text/javascript" src="avalon/dist/avalon.js"></script>

		<script>
			avalon.define({
				$id: "AAA",
				name: "liger",
				color: "green"  
			});
			avalon.define({
				$id: "BBB",
				name: "sphinx",
				color: "red"  
			});  
			avalon.define({
				$id: "CCC",
				name: "dragon" 

			});
			avalon.define({
				$id: "DDD",
				name: "sirenia" //不存在color

			});
		</script>
	</head>

	<body>

		<div ms-controller="AAA">
			<div>{{@name}} : {{@color}}</div>
			<div ms-controller="BBB">
				<div>{{@name}} : {{@color}}</div>
				<div ms-controller="CCC">
					<div>{{@name}} : {{@color}}</div>
				</div>
				<div ms-important="DDD">
					<div>{{@name}} : {{@color}}</div>
				</div>
			</div>
		</div>
	</body>

</html>

运行结果:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_20042935/article/details/89327759