外星人源码论坛 首页 编程 查看内容

avalon2学习教程05属性操作

2017-4-15 13:22| 发布者: 酸橘子| 查看: 950| 评论: 0|原作者: 外星人源码网|来自: [db:文章来源]

摘要: avalon2与avalon1的属性操作虽然都是使用ms-attr,但用法完全不一样。 avalon1是这样操作属性的 其语法为 ms-attr-valueName="vmProp

avalon2与avalon1的属性操作虽然都是使用ms-attr,但用法完全不一样。

avalon1是这样操作属性的

<div ms-attr-aaa='a' ms-attr-bbb='b' ms-attr-ccc='b'></div>

其语法为

ms-attr-valueName="vmProp"

有多少个属性就写多个ms-attr-。其中不能省略。此外,还存在ms-title, ms-alt,ms-src, ms-href, ms-selected, ms-checked等等缩略写法。但估计很少人知道,到底哪些属性可以缩写,哪些不能。

avalon2从减轻用户的记忆出发,将你要操作的属性全部打包成一个对象,并规定,只能属性值才能使用@开头的vm属性。此外,avalon不存在ms-title这样的缩略写法。

<div ms-attr="{aaa:@a, bbb:@b+11, ccc: @fn(@d,@e)}"></div>

或者

<div ms-attr="@attrObj"></div>

attrObj为vm的一个对象属性,但这个不太常用。
或者

<div ms-attr="[{@aaa:@a}, {bbb: @b}, @toggle ? {add:"111"}: {}]"></div>

ms-attr直接对应一个数组。这个灵感是来自ReactNative的style指令,它们可以通过数组,传入多个样式对象…………

不过无论你怎么搞,最后你传的东西能保持avalon内部能将它变回一个对象就行了。

有时你的对象很长,需要换行,avalon2也是支持的,即便你写得像以下这么恶心,avalon2还是能认出来。

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="./dist/avalon.js"></script>
        <script >
            var vm = avalon.define({
                $id: "test",
                title:111,
                src: "222",
                lang: 333
            })

        </script>
    </head>
    <body ms-controller="test" >
          <div  aaa='ddd' bbb=333 
                ms-attr='{title: @title,
                    ddd:@src, 
                    lang:@lang}' >{{
                   @src ? 333: 'empty'
              }}</div>
          <input ms-duplex="@src"/>
    </body>
</html>

但为了性能起见,ms-attr最好还是保持在一行吧。

avalon2的ms-attr可以支持过滤器,但没有提供现成的过滤器,虽然用户进行编写。不过需要注意的是,这个过滤器要处理的是{title:'111',ddd: '222', lang:222}这样的对象,而不是一个字符串。比如我们要将需要个属性转换成日期格式,你可以在你的过滤器里调用avalon自带的date过滤器。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论


相关分类

返回顶部

微信扫一扫,马上找工作

在线客服