avalon框架系列---指令(二)

终于可以开始说指令的第三种类别:绑定属性了,这类的指令数量相当多,我选一些用过的来写下,没用过的以后再写

1.ms-controller

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

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

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

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

    var vm_xxx = avalon.define({

       $id: "xxx",

    })

     1.在HTML代码里,ms-controller的值要跟vm的$id一样,且只能出现一次

     2.上述第2条的使用情景为:PC端网站主页等,因为一般网站的头部和底部搜会在多个页面出现,常会被封装为组件.

     但是一个组件里也会因为不同的功能而需要使用多个vm对象,比如:头部组件可以有导航栏和登录注册退出窗口,

     那么就可以导航栏使用一个vm对象,登录注册退出等使用一个vm对象,

      但是,整个组件里面必须要有一个顶层vm

 

      当avalon的扫描引擎打描到ms-controller/ms-important所在元素时, 会尝试移除ms-controller类名.因此基于此特性,我们可以在 首页渲染页面时,

      想挡住双花括号乱码问题,可以尝试这样干:

     .ms-controller{

        visibility: hidden;

       }

2.ms-attr

        属性绑定用于为元素节点添加一组属性, 因此要求属性值为对象或数组形式.

       数组最后也会合并成一个对象.然后取此对象的键名为属性名, 键值为属性值为元素添加属性

 

       如果键名如果为for, char这样的关键字,请务必在两边加上引号

      如果键名如果带横杠,请务必转换为驼峰风格或两边加上引号

      注意,不能在ms-attr中设置style属性

 

      这个指令算是用的比较多的了,主要是在表单输入框和设置动态样式等情况下

         1.给图片img标签设置图片链接 <img ms-attr="{src: @path}" />

         2.给a标签设置跳转链接 <img ms-attr="{href: @path}" />

         3.给输入框设置禁用等 <input ms-attr="{disabled: @opsc}">

  3.给普通标签动态设置样式值 <span :attr="{width: @width, height: @height}">使用对象字面量</span><br/>

     动态设置属性时候一般会用简单的判断:同时为真 或三元表达式 <span :attr="[@obj, @toggle && @active ]">123414</span>

 

3.ms-text

     文本绑定是最简单的绑定,它其实是双花括号插值表达式的一种形式

     它要求VM对应的属性的类型为字符串, 数值及布尔, 如果是null, undefined将会被转换为空字符串

     可以与具有格式化功能的过滤器一起使用

      <span ms-text="@aaa">不使用过滤器</span>

     <span ms-text="@aaa | uppercase">使用过滤器</span>

4.ms-html

      HTML绑定类似于文本绑定,能将一个元素清空,填上你需要的内容

      它要求VM对应的属性的类型为字符串

 

       ms-html的使用与ms-text大致相同,但是ms-text多用于展示字数较短的数据,ms-html因为具有HTML编译的能力

       所以多用于展示新闻之类的内容.新闻的内容多为富文本录入,带有文字格式,使用ms-html指令更好

5.ms-class

     属性绑定用于为元素节点添加几个类名, 因此要求属性值为字符串或字符串数组.

      字符串形式下,可以使用空格隔开多个类名

     字符串数组形下, 可以在里面使用三元运算符或与或号

    <span :class="@aaa">直接引用字符串</span>

    <span :class="@ccc">直接引用数组</span>

    <span :class="[@aaa, @bbb]">使用数组字面量</span>

    <span :class="['aaa', 'bbb',(@toggle? 'ccc':'ddd')]">选择性添加类名</span>

    <span :class="[@toggle && 'aaa']">选择性添加类名</span>

     <span :class="[ @ddd + 4]">动态生成类名</span>

6.ms-if

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

7.ms-visible

     这是通过修改元素的style.display值改变元素的可见性, 要求属性值对应一个布尔，

    如果不是布尔， avalon会自动转换值为布尔。