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

创建标签

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

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

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

        this.title = opts.title || "da宗熊";
    </todo>
</script>

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

riot.tag('todo', '<h1>{ title }</h1>', function(opts) {

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

});

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

riot.tag('标签名', '模版内容', 初始化函数);

可选参数有两个，分别是样式和属性：

riot.tag('标签名', '模版内容', '样式', fn);
或:
riot.tag('标签名', '模版内容', '属性', fn);
或:
riot.tag('标签名', '模版内容', '样式', '属性', fn);

样式：

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

riot.tag('todo', '<p class="title">{opts.title}</p>', '.title{color:#ff0;}', function(opts){
    // todo something
});

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

属性：

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

riot.tag('todo', '<p>{ opts.title }</p>', 'title="da宗熊" age="26"', function(opts){
    // todo something
});

---

新手遇坑

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

• Boolean属性：__checked=”{ isTrue }” 代替 checked={ isTrue }【这个绝对要！】

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

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