riot.js教程【五】标签嵌套、命名元素、事件、标签条件
前文回顾
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教程【五】标签嵌套、命名元素、事件、标签条件的更多相关文章
- riot.js教程【六】循环、HTML元素标签
前文回顾 riot.js教程[五]标签嵌套.命名元素.事件.标签条件 riot.js教程[四]Mixins.HTML内嵌表达式 riot.js教程[三]访问DOM元素.使用jquery.mount输入 ...
- riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期
前文回顾 riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法 riot.js教程[一]简介 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可 ...
- riot.js教程【四】Mixins、HTML内嵌表达式
前文回顾 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法: riot.j ...
- riot.js教程【一】简介
Riotjs简介 Riotjs是一款简单的.优雅的.组件化UI前端开发框架: 他支持自定义标签(custom tags),拥有令人愉悦的语法,优雅的API和非常小的体积: 为什么需要一个新的界面库 前 ...
- riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法
基本要求 一个riot标签,就是展现和逻辑的组合(也就是html和JS): 以下是编写riot标签最基本的规则: 先撰写HTML,再撰写JS,JS代码可以写在<script>标签内部,但这 ...
- JavaScript 基础(一) - JavaScript的引入方式,JavaScript 变量命名规则,JS 的五种基本数据类型,ECMAScript 算数运算符,逻辑运算符
JavaScript的引入方式 直接编写 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- a标签嵌套href默认行为与子元素click事件存在影响
2018-08-07 Question about work 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当<a>标签内部存在嵌套时, 父元素&l ...
- 无废话ExtJs 入门教程五[文本框:TextField]
无废话ExtJs 入门教程五[文本框:TextField] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个文本框.如下所示代码区的第42行位置,items: ...
- 阅读:重新介绍 JavaScript(JS教程)
这篇文章是记录自己阅读重新介绍 JavaScript(JS 教程)的记录和个人体会 在线调试代码工具:https://codepen.io/pen 引言 分歧根源:名字Javascript和Java有 ...
随机推荐
- Jquery实现按钮点击遮罩加载,处理完后恢复
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasyUiLoad.aspx. ...
- Java 对象复制
Java 对象的一共有 3 种复制对象的方式. 1.直接赋值 (引用复制 ),此种复制方式比较常用. 诸如 A a = b ; a 是直接复制了b的引用 ,也就是说它俩指向的是同一个对象. 此时 ...
- 【学习】js学习笔记:对象的遍历和封装特性
1.对象的属性访问: 对象.属性 对象[属性],但中括号中必须是字符串 2.属性的遍历: for in方法举例: var ren={}; ren.name="名字"; ren.ea ...
- python基于万象优图识别图片中的中文
最近一直在研究光学字符识别,即OCR.最开始在谷爹那里了解到了开源的Tesseract,可以拿来识别简单的英文和数字.但是识别中文的准确率并不高. 然后从Tesseract到Tesseract.js, ...
- Nhibernate/Hibernate 使用多参数存儲過程 出現could not execute query,Could not locate named parameter等錯誤解決
<?xml version="1.0" encoding="utf-8" ?> <hibernate-mapping xmlns=" ...
- win10 uwp 弹起键盘不隐藏界面元素
本文主要讲,在我们使用手机输入的时候,会因为手机的虚拟键盘隐藏了一些界面的元素.我们有一个简单的方法让虚拟键盘不隐藏界面元素. 我们需要的界面元素是在显示了虚拟键盘后的空间能全部显示,如果不能的话,还 ...
- win10 uwp 圆角按钮
本文讲的是如何做圆角按钮,我们在UWP本来的按钮都是矩形,圆角Radius没有,所以本文就用简单方法去做圆角按钮. 我们按钮需要圆角,而自带没有,其实做一个很简单,把原来的按钮变为背景透明,然后使用矩 ...
- springcloud之服务注册与发现(Eureka)
springcloud服务注册与发现 使用Eureka实现服务治理 作用:实现服务治理(服务注册与发现) 简介: Spring Cloud Eureka是Spring Cloud Netflix项目下 ...
- C#编译器和CLI的安装
为了完成C#程序编译和运行,需要安装代码对应版本的编译器和CLI(公共语言框架)平台. (部分内容摘自<C#本质论>) 针对主流的CLI平台(Microsoft .NET),有两种安装方案 ...
- Keras学习环境配置-GPU加速版(Ubuntu 16.04 + CUDA8.0 + cuDNN6.0 + Tensorflow)
本文是个人对Keras深度学习框架配置的总结,不周之处请指出,谢谢! 1. 首先,我们需要安装Ubuntu操作系统(Windows下也行),这里使用Ubuntu16.04版本: 2. 安装好Ubunt ...