构建方式
Riot默认是通过”自定义标签”来构建DOM内容,但是也可以通过属性”riot-tag”,来指定使用哪种”自定义标签”来构建DOM。
如:
<div riot-tag="todo" title="da宗熊"></div>
等同于:
<todo title="da宗熊"></todo>
或者,你也可以在 riot.mount 中,制定构建的元素:
<div id="content"></div>
<script>
// 给id="content"的元素,构建todo的内容
// 第一个参数,可以是dom元素,too
riot.mount("#content", "todo");
</script>
样式
在Riot自定义标签中,可以使用style标签,给组件编写样式。Riot会把所有style的内容,插入到head标签里,不用担心样式会被重复定义。
<!Doctype html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="riot.js"></script>
<script type="text/javascript" src="compiler.js"></script>
</head>
<body>
<todo></todo>
<todo></todo>
</body>
<!-- 最前面一定要有空格或TAB -->
<script type="riot/tag">
<todo>
<label>da宗熊</label>
<!-- 自定义样式 -->
<style>
label{color:#ccc;}
</style>
</todo>
</script>
<script type="text/javascript">
riot.mount("todo");
</script>
</html>
最终生成:
虽然调用了两次todo标签,但最终只生成了一份样式。
each循环
要实现类似ul,ol这种列表,循环是绝对需要的,Riot内置了each属性,用于循环生成”类列表”的内容【我们不仅仅可以遍历列表,甚至可以遍历对象】。
<!Doctype html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="riot.js"></script>
<script type="text/javascript" src="compiler.js"></script>
</head>
<body>
<todo></todo>
</body>
<!-- 最前面一定要有空格或TAB -->
<script type="riot/tag">
<todo>
<!-- 遍历列表 -->
<ul each={ item in list }>
<li>{ item }</li>
</ul>
<!-- 遍历对象 -->
<ul each={ key,value in obj }>
<li>{ key }:{ value }</li>
</ul>
// 列表内容
this.list = [
"内容1",
"内容2",
"内容3"
];
// 对象内容
this.obj = {
name: "da宗熊",
age: 26
};
</todo>
</script>
<script type="text/javascript">
riot.mount("todo");
</script>
</html>
生成如下:
如果列表的内容,是个对象,Riot也提供了快捷的访问方式:
<script type="riot/tag">
<todo>
<ul each={ list }>
<!-- 这里的 context 已经是 list[n] 咧 -->
<li>{ title }</li>
</ul>
// 列表内容
this.list = [
{title: "第一个"},
{title: "第二个"}
];
</todo>
</script>
结果如下:
可以看出,括号表达式【{ expression }】中的上下文【this对象】,已经不是标签的上下文,而变成了当前遍历对象的当前项。
如果我们需要在 each 循环中,访问标签的上下文,可以通过”parent”关键字访问。
如:
<script type="riot/tag">
<todo>
<ul each={ items }>
<li>
<span>{ title }</span>
<a onclick={ parent.remove }>删除</a>
</li>
</ul>
this.items = [{title: "da宗熊"}];
remove(e){
// 获取到当前点击, each循环中的item
// 这里就是获取到了 {title: "da宗熊"} 这个对象
var item = e.item;
var index = this.items.indexOf(item);
// 把当前项删掉
// 数组的slice,push等操作,自带了this.update操作,SO,这里省了this.update调用
this.items.splice(index, 1);
}
</todo>
</script>
在event对象中,可以通过 event.item来访问到当前each循环中的当前对象。