riot.js教程【五】标签嵌套、命名元素、事件、标签条件

简介: 前文回顾riot.js教程【四】Mixins、HTML内嵌表达式riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期;riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法;riot.

前文回顾
riot.js教程【四】Mixins、HTML内嵌表达式
riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期;
riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法;
riot.js教程【一】简介;

标签嵌套

让我们定义一个父标签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元素中

目录
相关文章
|
26天前
|
Web App开发 JavaScript 前端开发
javascript onkeydown事件
javascript onkeydown事件
|
3月前
|
JavaScript 前端开发
js事件队列
js事件队列
139 55
|
23天前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
30 2
|
2月前
|
JavaScript 前端开发
JavaScript 事件
JavaScript 事件
32 2
|
10天前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
28 6
|
19天前
|
JavaScript 前端开发
js教程——函数
js教程——函数
21 4
|
2月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
21 5
|
13天前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
28 0
|
2月前
|
监控 JavaScript 前端开发
|
21天前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
47 0