controller绑定

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

ms-controller的元素节点下面的其他节点也可以使用ms-controller

每个VM的$id可以在页面上出现一次, 因此不要在ms-for内使用ms-controller.

当我们在某个指令上用@aaa时,它会先从其最近的ms-controller元素上找, 找不到再往其更上方的ms-controller元素ms-controller - 图1

  1. <script>
  2.   avalon.define({
  3.       $id: "AAA",
  4.       name: "liger",
  5.       color: "green"　　
  6.   });
  7.   avalon.define({
  8.       $id: "BBB",
  9.       name: "sphinx",
  10.       color: "red"　　
  11.   });　　
  12.   avalon.define({
  13.       $id: "CCC",
  14.       name: "dragon" //不存在color
  16.   });
  17.   avalon.define({
  18.       $id: "DDD",
  19.       name: "sirenia" //不存在color
  21.   });　
  22. </script>
  23. <div ms-controller="AAA">
  24.     <div>{{@name}} : {{@color}}</div>
  25.     <div ms-controller="BBB">
  26.         <div>{{@name}} : {{@color}}</div>
  27.         <div ms-controller="CCC">
  28.             <div>{{@name}} : {{@color}}</div>
  29.         </div>
  30.         <div ms-important="DDD">
  31.             <div>{{@name}} : {{@color}}</div>
  32.         </div>
  33.     </div>
  34. </div>

当avalon的扫描引擎打描到ms-controller/ms-important所在元素时, 会尝试移除ms-controller类名.因此基于此特性,我们可以在首页渲染页面时, 想挡住双花括号乱码问题,可以尝试这样干(与avalon1有点不一样):

  1.   .ms-controller{
  2.      visibility: hidden;
  3.   }