if绑定

通过属性值决定是否渲染目标元素, 为否时原位置上变成一个注释节点

avalon1.*中ms-if-loop指令已经被废掉,请使用limitBy, selectBy, filterBy过滤器代替相应功能

  1. <body :controller="test">
  2. <script>
  3. var vm = avalon.define({
  4.   $id: "test",
  5.   aaa: "这是被隐藏的内容"
  6.   toggle: false
  7. })
  8. </script>
  9. <p><button type="button" :click='@toggle = !@toggle'>点我</span></button></p>
  10. <div :if="@toggle">{{@aaa}}</div>
  11. </body>

注意,有许多人喜欢用ms-if做非空处理,这是不对的,因此ms-if只是决定它是否插入DOM树与否,ms-if里面的ms-指令还是会执行.

  1. avalon.define({
  2.   $id: 'test',
  3.   aaa: {}
  4. })
  1. <div ms-controller="test">
  2.    <div ms-if="@aaa.bbb">
  3.      {{@aaa.bbb.ccc}}这里肯定会出错
  4.    </div>
  5. </div>

正确的做法是,当你知道这里面有非空判定,需要用方法包起来

  1. avalon.define({
  2.   $id: 'test',
  3.   aaa: {},
  4.   show: function(aaa, bbb, ccc){
  5.      var obj = aaa[bbb]
  6.      if(obj){
  7.         return obj[ccc]
  8.      }
  9.      return ''
  10.   }
  11. })
  1. <div ms-controller="test">
  2.    <div ms-if="@aaa.bbb">
  3.      {{@show(@aaa, 'bbb', 'ccc')}}
  4.    </div>
  5. </div>