riot.js教程【五】标签嵌套、命名元素、事件、标签条件
riot.js教程【五】标签嵌套、命名元素、事件、标签条件
前文回顾 riot.js教程【四】Mixins、HTML内嵌表达式 riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期；
标签嵌套
让我们定义一个父标签account，一个子标签subscription
<account>
<subscription plan={ opts.plan } show_details="true" />
</account>
<subscription>
<h3>{ opts.plan.name }</h3>
// Get JS handle to options
var plan = opts.plan,
show_details = opts.show_details
// access to the parent tag
var parent = this.parent
</subscription>注意：show_details的命名方式，这里不能写成驼峰式的名字，因为浏览器解析标签的时候会把大写转成小写
接下来我们把account标签添加到页面的body中
<body>
<account></account>
</body>
<script>
riot.mount('account', { plan: { name: 'small', term: 'monthly' } })
</script>父标签的参数是通过riot.mount方法传递的，子标签的参数是通过标签属性传递过去的
注意：嵌套的标签总是在父标签内部声明，定义；
标签内嵌入HTML
我们先定义一个my-tag标签
<my-tag>
<p>Hello <yield/></p>
this.text = 'world'
</my-tag>注意：这里有一个yield占位符，我们稍后再讲它
现在我们在页面上使用这个标签
<my-tag>
<b>{ text }</b>
</my-tag>那么他渲染出来之后，是如下这个样子的：
<my-tag>
<p>Hello <b>world</b><p>
</my-tag>你看到了吗？yield占位符输出的，其实是text变量
这就是在标签内嵌入HTML代码
命名元素
当元素具备ref属性的时候，
这个元素会被链接到this.refs上，
这样你就可以很方便的用JS访问到它
<login>
<form ref="login" onsubmit={ submit }>
<input ref="username">
<input ref="password">
<button ref="submit">
</form>
// grab above HTML elements
submit(e) {
var form = this.refs.login,
username = this.refs.username.value,
password = this.refs.password.value,
button = this.refs.submit
}
</login>注意，这个指向的操作，是在mount事件被触发前完成的，所以你可以在mount事件中访问到this.refs
事件
DOM事件可以直接和riotjs标签内的方法绑定，示例如下：
<login>
<form onsubmit={ submit }>
</form>
// this method is called when above form is submitted
submit(e) {
}
</login>只要事件名以on开头的，比如：onclick, onsubmit, oninput，都可以直接绑定方法
这类事件也可以直接绑定一句表达式，如下：
<form onsubmit={ condition ? method_a : method_b }>在事件方法内，this指代本标签实例，方法执行完之后，会马上执行this.update()事件，
如果你在方法内部，使用了event.preventUpdate，那么方法执行完之后，就不会执行this.update()事件；
方法的第一个参数就是标准的event对象
- e.currentTarget 指代触发事件的DOM元素
- e.target 也指代触发事件的DOM元素
- e.which 指代按键代码 (keypress, keyup, 等).
标签条件
你可以使用标签条件来决定是否需要显示一个标签，如下：
<div if={ is_premium }>
<p>This is for premium users only</p>
</div>注意，标签条件的值可以是一个变量，也可以是一个表达式
除了if之外，还可以使用show和hide来决定是否显示一个标签
show – 当值是true的时候，相当于 style="display: ''"
hide – 当值是true的时候，相当于 style="display: none"
if – 当值是true的时候，会把该标签加入到DOM元素中，是false的时候，不会把标签加入到dom元素中