riot.js教程【六】循环、HTML元素标签
前文回顾
riot.js教程【五】标签嵌套、命名元素、事件、标签条件
riot.js教程【四】Mixins、HTML内嵌表达式
riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期;
riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法;
riot.js教程【一】简介;
循环
可以通过each属性来达到标签循环,如下:
<todo>
<ul>
<li each={ items } class={ completed: done }>
<input type="checkbox" checked={ done }> { title }
</li>
</ul>
this.items = [
{ title: 'First item', done: true },
{ title: 'Second item' },
{ title: 'Third item' }
]
</todo>
在上面的代码中,具有each属性的元素,会被重复N次,N等于items数组的元素数量;
当你通过push,slice,splice改变数组数量的时候,DOM元素也会随之变化
上下文
所有被循环的元素,都拥有自己的上下文,请看如下代码:
<todo>
<div each={ items }>
<h3>{ title }</h3>
<a onclick={ parent.remove }>Remove</a>
</div>
this.items = [ { title: 'First' }, { title: 'Second' } ]
remove(event) {
// looped item
var item = event.item
// index on the collection
var index = this.items.indexOf(item)
// remove from collection
this.items.splice(index, 1)
}
</todo>
在被循环的元素内部,想访问数组子对象的属性,可以直接访问,如:{title}
如果想访问父元素的属性,就需要加上parent,比如:{ parent.remove },因为上下文不一致了
在 parent.remove方法中,可以使用event.item对象访问当前数组元素的属性,
parent.remove方法执行完之后,会执行父组件的update事件;
当在一个父组件实例执行this.update()的时候 ,该父组件下的所有子组件都会更新,
自定义的循环标签
一个自定义的标签也可以被标记为循环标签,如下:
<todo-item each="{ items }" data="{ this }"></todo-item>
你可以通过data="{ this }"把当前标签的实例传递给todo-item的实例
简单数组循环
循环的数组元素不一定是对象,如下:
<my-tag>
<p each="{ name, i in arr }">{ i }: { name }</p>
this.arr = [ true, 110, Math.random(), 'fourth']
</my-tag>
对象属性循环
与简单数组循环相对,下面的代码是对象属性循环
<my-tag>
<p each="{ value, name in obj }">{ name } = { value }</p>
this.obj = {
key1: 'value1',
key2: 1110.8900,
key3: Math.random()
}
</my-tag>
注意,对象属性循环有性能问题,不推荐使用;
riotjs是通过JSON.stringify来判断对象是否有变更,以此来决定是否要更新HTML元素
key属性
你可以在循环标签的时候,使用key属性
<loop>
<ul>
<li each={ user in users } key="id">{ user.name }</li>
</ul>
<script>
this.users = [
{ name: 'Gian', id: 0 },
{ name: 'Dan', id: 1 },
{ name: 'Teo', id: 2 }
]
</script>
</loop>
你甚至可以给key属性赋值为方法
<loop>
<ul>
<li each={ user in users } key={ user.id() }>{ user.name }</li>
</ul>
<script>
this.users = [
{ name: 'Gian', id() { return 0 } },
{ name: 'Dan', id() { return 1 } },
{ name: 'Teo', id() { return 2 } }
]
</script>
</loop>
虚拟标签
有的时候,你需要循环多个标签,但是你又不想在这多个标签上面套一个wrapper,
这个时候你就可以用虚拟标签,代码如下:
<dl>
<virtual each={item in items}>
<dt>{item.key}</dt>
<dd>{item.value}</dd>
</virtual>
</dl>
你可以在虚拟标签上添加if 或者 data-is属性
<virtual data-is="my-tag" if={condition}>
<p>Show me with no wrapper on condition</p>
</virtual>
HTML元素标签
你可以把HTML元素当作riot标签使用,但只能在body内这么用,如下:
<ul data-is="my-list"></ul>
riot.mount('my-list')
当你碰到这种情况的时候,你需要使用data-is属性
<my-fancy-options>
<option>foo</option>
<option>bar</option>
</my-fancy-options>
<!-- 下面的代码是错误的, 一个 select 标签 只允许出现<option> 子元素 -->
<select>
<my-fancy-options />
</select>
<!-- 下面的代码是正确的 因为渲染 <option> 标签时会使用 <select> 作为父标签 -->
<select data-is='my-fancy-options'></select>
本系列写完了,祝好!
riot.js教程【六】循环、HTML元素标签的更多相关文章
- riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期
前文回顾 riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法 riot.js教程[一]简介 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可 ...
- riot.js教程【五】标签嵌套、命名元素、事件、标签条件
前文回顾 riot.js教程[四]Mixins.HTML内嵌表达式 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二] ...
- riot.js教程【四】Mixins、HTML内嵌表达式
前文回顾 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法: riot.j ...
- riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法
基本要求 一个riot标签,就是展现和逻辑的组合(也就是html和JS): 以下是编写riot标签最基本的规则: 先撰写HTML,再撰写JS,JS代码可以写在<script>标签内部,但这 ...
- riot.js教程【一】简介
Riotjs简介 Riotjs是一款简单的.优雅的.组件化UI前端开发框架: 他支持自定义标签(custom tags),拥有令人愉悦的语法,优雅的API和非常小的体积: 为什么需要一个新的界面库 前 ...
- 通过JS动态的修改HTML元素的样式和增添标签元素等
一. 通过JS动态的修改HTML元素的样式 1. 要想在js中动态的修改HTML元素的样式,首先需要写document, document我们称之为文档对象,这个对象中保存了当前网页中所有的 ...
- 公众号第三方平台开发 教程六 代公众号使用JS SDK说明
公众号第三方平台开发 教程一 创建公众号第三方平台 公众号第三方平台开发 教程二 component_verify_ticket和accessToken的获取 公众号第三方平台开发 教程三 微信公众号 ...
- js:for循环ul/li,获取当前被点击元素的id,以及给其他li设置属性
js:for循环ul/li,获取当前被点击元素的id,以及给其他li设置属性 <!doctype html> <html> <head> <meta char ...
- 阅读:重新介绍 JavaScript(JS教程)
这篇文章是记录自己阅读重新介绍 JavaScript(JS 教程)的记录和个人体会 在线调试代码工具:https://codepen.io/pen 引言 分歧根源:名字Javascript和Java有 ...
随机推荐
- MVC中@RenderBody、@RenderSection、@RenderPage、@Html.RenderPartial、Html.RenderAction的作用和区别
1.@RenderBody() 作用和母版页中的服务器控件类似,当创建基于此布局页面的视图时,视图的内容会和布局页面合并,而新创建视图的内容会通过布局页面的@RenderBody()方法呈现在标签 ...
- 使用IGP和BGP的配合达到降低路由容量目的的实验与总结
概述 1.先说结论,通过eBGP协议,可以显著降低对非核心路由器的路由容量要求,因为核心路由器的数量明显少于非核心路由器,所以,通过此措施即联通网络,又降低设备要求,非常适宜大型网络. 2.因为网络规 ...
- 将 C# 枚举反序列化为 JSON 字符串 基础理论
该转换过程需要引用 Newtonsoft.JSON,这其中的转换过程还是蛮有意思的. 一.定义枚举 /// <summary> /// 托寄物品枚举 /// </summary> ...
- 阿里巴巴Java规约插件试用
阿里Java开发规约Eclipse插件介绍 阿里巴巴集团配合<阿里巴巴Java开发手册>PDF终极版开发的IDE插件,目前包括IDEA插件.Eclipse插件. 安装 检查环境 插件要求: ...
- Java 多线程的一些问题
1.volatile关键字的作用 一个非常重要的问题,是每个学习.应用多线程的Java程序员都必须掌握的.理解volatile关键字的作用的前提是要理解Java内存模型,volatile关键字的作用主 ...
- PhiloGL学习(2)——骚年,让我们荡起双桨
前言 上一篇文章中简单介绍了PhiloGL框架如何上手.GLSL语言以及简单的绘制一个方块(见PhiloGL学习(1)--场景创建及二维方块加载).本文很简单,我们一起来让这个方块动起来. 一. ...
- Android Studio中的Java控制台中出现乱码问题?
今天在用Android studio 中敲代码时发现控制台出不了汉字,一打汉字全是乱码的.在此特供解决方案. 在Java的工程目录build.gradle下添加如下代码: 1.新版gradle tas ...
- 12.21-Android WebService(基于KSOAP2)
KSOAP2_连接WebService *****我是小知识点******** Ksoap2提供了对soap序列化更好的支持.Ksoap2是一个轻量级的J2ME平台的实现框架,提供了soap协议消息的 ...
- LeetCode 643. Maximum Average Subarray I (最大平均值子数组之一)
Given an array consisting of n integers, find the contiguous subarray of given length k that has the ...
- 一个简单的makefile文件编写
下午闲来无聊,就打开很久没动过的linux系统想熟悉熟悉在linux上面编译代码,结果一个makefile文件搞到晚上才搞定,哈哈! 先把代码简单贴上来,就写了一个冒泡排序: sort.h: #ifn ...