首页 > web前端 > js教程 > riot.js学习【七】脚本创建标签

riot.js学习【七】脚本创建标签

黄舟
发布: 2017-01-16 16:19:46
原创
1430 人浏览过

创建标签

在Riot中,我们通过html代码,创建自定义标签,但实际上,最终可运行的自定义标签,会被编译成脚本。

实际上,一段这样的自定义标签代码:

<script type="riot/tag">
    <todo>        <h1>{ title }</h1>

        this.title = opts.title || "da宗熊";    </todo></script>
登录后复制

通过编译后,会成为一段真正可执行的脚本,像这样子:

riot.tag(&#39;todo&#39;, &#39;<h1>{ title }</h1>&#39;, function(opts) {

    this.title = opts.title || "da宗熊";

});
登录后复制

riot.tag必填的参数有3个:

riot.tag(&#39;标签名&#39;, &#39;模版内容&#39;, 初始化函数);
登录后复制

可选参数有两个,分别是样式和属性:

riot.tag(&#39;标签名&#39;, &#39;模版内容&#39;, &#39;样式&#39;, fn);
或:riot.tag(&#39;标签名&#39;, &#39;模版内容&#39;, &#39;属性&#39;, fn);
或:riot.tag(&#39;标签名&#39;, &#39;模版内容&#39;, &#39;样式&#39;, &#39;属性&#39;, fn);
登录后复制

样式:

样式的内容,会被放在head里的一个style标签内。
所以,样式的正确编写如下:

riot.tag(&#39;todo&#39;, &#39;<p class="title">{opts.title}</p>&#39;, &#39;.title{color:#ff0;}&#39;, function(opts){
    // todo something});
登录后复制

样式需要编写完成的选择器,关联样式。

属性:

属性的内容,最终会体现在context.opts里,属性的正确编写方式如下:

riot.tag(&#39;todo&#39;, &#39;<p>{ opts.title }</p>&#39;, &#39;title="da宗熊" age="26"&#39;, function(opts){
    // todo something});
登录后复制

新手遇坑

官网说,属性表达式必须带引号,如:value=”{ val }” 代替 value={ val }【BUT,2.1版亲身测试,没啥区别,有大牛解析么?】

Boolean属性:__checked=”{ isTrue }” 代替 checked={ isTrue }【这个绝对要!】

img标签的src,最好写为 riot-src,避免错误的请求

使用riot-style代替style,为了兼容ie

以上就是riot.js学习【七】脚本创建标签的内容,更多相关内容请关注PHP中文网(www.php.cn)!


来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板