前文回顾

标签嵌套

让我们定义一个父标签account，一个子标签subscription

      
     
    
      
     
{ opts.plan.name }
  // Get JS handle to options  var plan = opts.plan,      show_details = opts.show_details  // access to the parent tag  var parent = this.parent
    

注意：show_details的命名方式，这里不能写成驼峰式的名字，因为浏览器解析标签的时候会把大写转成小写

接下来我们把account标签添加到页面的body中

父标签的参数是通过riot.mount方法传递的，子标签的参数是通过标签属性传递过去的

注意：嵌套的标签总是在父标签内部声明，定义；

标签内嵌入HTML

我们先定义一个my-tag标签

      
     
Hello 
      
  this.text = 'world'
    

注意：这里有一个yield占位符，我们稍后再讲它

现在我们在页面上使用这个标签

      
     { text }
    

那么他渲染出来之后，是如下这个样子的：

      
     
Hello world
     
    

你看到了吗？yield占位符输出的，其实是text变量

这就是在标签内嵌入HTML代码

命名元素

当元素具备ref属性的时候，

这个元素会被链接到this.refs上，

这样你就可以很方便的用JS访问到它

      
     
    
          
          
          // 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  }
     
    

注意，这个指向的操作，是在mount事件被触发前完成的，所以你可以在mount事件中访问到this.refs

事件

DOM事件可以直接和riotjs标签内的方法绑定，示例如下：

      
     
  
     
  // this method is called when above form is submitted  submit(e) {  }
    

只要事件名以on开头的，比如：onclick, onsubmit, oninput，都可以直接绑定方法

这类事件也可以直接绑定一句表达式，如下：

在事件方法内，this指代本标签实例，方法执行完之后，会马上执行this.update()事件，

如果你在方法内部，使用了event.preventUpdate，那么方法执行完之后，就不会执行this.update()事件；

方法的第一个参数就是标准的event对象

• e.currentTarget 指代触发事件的DOM元素
• e.target 也指代触发事件的DOM元素
• e.which 指代按键代码 (keypress, keyup, 等).

标签条件

你可以使用标签条件来决定是否需要显示一个标签，如下：

    
  
     
This is for premium users only
    

注意，标签条件的值可以是一个变量，也可以是一个表达式

除了if之外，还可以使用show和hide来决定是否显示一个标签

show – 当值是true的时候，相当于 style="display: ''"

hide – 当值是true的时候，相当于 style="display: none"

if – 当值是true的时候，会把该标签加入到DOM元素中，是false的时候，不会把标签加入到dom元素中