前文回顾

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元素中

riot.js教程【五】标签嵌套、命名元素、事件、标签条件的更多相关文章

  1. riot.js教程【六】循环、HTML元素标签

    前文回顾 riot.js教程[五]标签嵌套.命名元素.事件.标签条件 riot.js教程[四]Mixins.HTML内嵌表达式 riot.js教程[三]访问DOM元素.使用jquery.mount输入 ...

  2. riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期

    前文回顾 riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法 riot.js教程[一]简介 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可 ...

  3. riot.js教程【四】Mixins、HTML内嵌表达式

    前文回顾 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法: riot.j ...

  4. riot.js教程【一】简介

    Riotjs简介 Riotjs是一款简单的.优雅的.组件化UI前端开发框架: 他支持自定义标签(custom tags),拥有令人愉悦的语法,优雅的API和非常小的体积: 为什么需要一个新的界面库 前 ...

  5. riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法

    基本要求 一个riot标签,就是展现和逻辑的组合(也就是html和JS): 以下是编写riot标签最基本的规则: 先撰写HTML,再撰写JS,JS代码可以写在<script>标签内部,但这 ...

  6. JavaScript 基础(一) - JavaScript的引入方式,JavaScript 变量命名规则,JS 的五种基本数据类型,ECMAScript 算数运算符,逻辑运算符

    JavaScript的引入方式 直接编写 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  7. a标签嵌套href默认行为与子元素click事件存在影响

    2018-08-07 Question about work 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当<a>标签内部存在嵌套时, 父元素&l ...

  8. 无废话ExtJs 入门教程五[文本框:TextField]

    无废话ExtJs 入门教程五[文本框:TextField] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个文本框.如下所示代码区的第42行位置,items: ...

  9. 阅读:重新介绍 JavaScript(JS教程)

    这篇文章是记录自己阅读重新介绍 JavaScript(JS 教程)的记录和个人体会 在线调试代码工具:https://codepen.io/pen 引言 分歧根源:名字Javascript和Java有 ...

随机推荐

  1. cocos2dx - v2.3.3编辑器简单使用及不同分辨率适配

    准备工具 Cocos 引擎当前最新版本:v2.3.3       官网下载地址: http://www.cocos.com/download/ 前述:cocos自带UI编辑器在最新的版本有了很大的改动 ...

  2. JAVA继承:编译与运行的关系(编译看左边,运行看右边)

    "成员变量,静态方法看左边:非静态方法:编译看左边,运行看右边." 意思是:当父类变量引用子类对象时(Fu f = new Zi();),在这个引用变量f指向的对象中,他的成员变量 ...

  3. Java 线程并发

    http://www.yesky.com/9/1899009.shtml http://zhidao.baidu.com/link?url=-xZ9JLo5x4bvCSVyXb2XhO6TODnBcU ...

  4. 各大公司Java后端开发面试题总结

    ThreadLocal(线程变量副本)Synchronized实现内存共享,ThreadLocal为每个线程维护一个本地变量.采用空间换时间,它用于线程间的数据隔离,为每一个使用该变量的线程提供一个副 ...

  5. ES6-字符串的扩展-模板字符串

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. [ACdream]女神教你字符串——导字符串

    Problem Description 正如大家知道的,女神喜欢字符串,而在字符串中,女神最喜欢回文字符串,但是不是所有的字符串都是回文字符串,但是有一些字符串可以进行“求导”来变成回文字符串. 字符 ...

  7. Windows 安装 python2.7

    Windows 安装 python2.7 python2.7下载地址: https://www.python.org/downloads/release/python-2714/ 安装过程: 设置系统 ...

  8. Phonegap开发相关问题

    环境搭建:参考http://www.phonegapcn.com/start/zh/1.3/#android 调试: 1.在线远程调试 http://debug.phonegap.com/ 通过USB ...

  9. CDN 机制

    CDN的全称Content Delivery Network,(缩写:CDN)即内容分发网络. CDN是一个经策略性部署的整体系统,从技术上全面解决由于网络带宽小.用户访问量大.网点分布不均而产生的用 ...

  10. .Net高级进阶,在复杂的业务逻辑下,如何以最简练的代码,最直观的编写事务代码?

    本文将通过场景例子演示,来通俗易懂的讲解在复杂的业务逻辑下,如何以最简练的代码,最直观的编写事务代码. 通过一系列优化最终达到两个效果,1.通过代码块来控制事务(分布式事务),2.通过委托优化Tran ...