前文回顾

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元素标签的更多相关文章

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

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

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

    前文回顾 riot.js教程[四]Mixins.HTML内嵌表达式 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二] ...

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

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

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

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

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

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

  6. 通过JS动态的修改HTML元素的样式和增添标签元素等

    一. 通过JS动态的修改HTML元素的样式   1. 要想在js中动态的修改HTML元素的样式,首先需要写document,    document我们称之为文档对象,这个对象中保存了当前网页中所有的 ...

  7. 公众号第三方平台开发 教程六 代公众号使用JS SDK说明

    公众号第三方平台开发 教程一 创建公众号第三方平台 公众号第三方平台开发 教程二 component_verify_ticket和accessToken的获取 公众号第三方平台开发 教程三 微信公众号 ...

  8. js:for循环ul/li,获取当前被点击元素的id,以及给其他li设置属性

    js:for循环ul/li,获取当前被点击元素的id,以及给其他li设置属性 <!doctype html> <html> <head> <meta char ...

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

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

随机推荐

  1. 用SqlCommandBuilder 实现批量更新

    一般是这样的,如果用设计器将SqlDataAdapter拖到页面中使用时,不会出现SqlDataAdapter.Update(ds)更新时出错情况,因为系统会自动生成SqlDataAdapter的属性 ...

  2. 第九章 MySQL中LIMIT和NOT IN案例

    第九章 MySQL中LIMIT和NOT IN案例 一.案例的项目 1.创建数据库语句: #创建数据库 CREATE DATABASE `schoolDB`; USE `schoolDB`; #创建学生 ...

  3. Echarts数据可视化全解注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  4. 国内为什么没有好的 Stack Overflow 的模仿者?,因为素质太低?没有分享精神?

    今天终于在下班前搞定一个技术问题,可以准时下班啦.当然又是通过StackOverflow找到的解决思路,所以下班路上和同事顺便聊起了它,两个资深老程序猿,还是有点感叹,中国的程序员群体人数应该不少,为 ...

  5. 【学习】Zepto与jQuery 差别

    前几天遇到一个项目,需要把jquery全部改成Zepto,当时因为自己没有实际经验,所以没有接.今天查了一下两者究竟有什么区别. 首先看到了这么一篇文章:http://www.bootcss.com/ ...

  6. javaScript基础的基础

    JavaScript是一个脚本语言,需要有宿主文件,他的宿主文件是HTML文件. 与JAVA没有直接关系 一般写在 1.head里面 2.body里面 3.</html>后面 一般写在&l ...

  7. Hadoop(九)Hadoop IO之Compression和Codecs

    前言 前面一篇介绍了Java怎么去查看数据块的相关信息和怎么去查看文件系统.我们只要知道怎么去查看就行了!接下来我分享的是Hadoop的I/O操作. 在Hadoop中为什么要去使用压缩(Compres ...

  8. linux 守护进程编程

    概述: Daemon运行在后台也称作"后台服务进程". 它是没有控制终端与之相连的进程.它独立于控制终端.通常周期的执行某种任务. 守护进程脱离终端是为了避免进程在执行过程中的信息 ...

  9. 关闭 Activity 关闭方式 finish(), exit(), killProcess(), restartPackage()(转载)

    finish():结束当前 Activity,不会立即释放内存.遵循 android 内存管理机制.exit():结束当前组件如 Activity,并立即释放当前 Activity 所占资源.kill ...

  10. 字符串解码DecodeString

    字符串解码 原创博客,转载请注明出处!eg:ss=2[abc]3[cd]ef   return:abcabccdcdcdefss=3[a2[c]]2[a]    return:accaccaccaas ...