js循环解析html标签,riot.js教程【六】循环、HTML元素标签
循环
可以通过each属性来达到标签循环,如下:
{ title }
this.items = [
{ title: 'First item', done: true },
{ title: 'Second item' },
{ title: 'Third item' }
]
在上面的代码中,具有each属性的元素,会被重复N次,N等于items数组的元素数量;
当你通过push,slice,splice改变数组数量的时候,DOM元素也会随之变化
上下文
所有被循环的元素,都拥有自己的上下文,请看如下代码:
{ title }
Remove
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)
}
在被循环的元素内部,想访问数组子对象的属性,可以直接访问,如:{title}
如果想访问父元素的属性,就需要加上parent,比如:{ parent.remove },因为上下文不一致了
在 parent.remove方法中,可以使用event.item对象访问当前数组元素的属性,
parent.remove方法执行完之后,会执行父组件的update事件;
当在一个父组件实例执行this.update()的时候 ,该父组件下的所有子组件都会更新,
自定义的循环标签
一个自定义的标签也可以被标记为循环标签,如下:
你可以通过data="{ this }"把当前标签的实例传递给todo-item的实例
简单数组循环
循环的数组元素不一定是对象,如下:
{ i }: { name }
this.arr = [ true, 110, Math.random(), 'fourth']
对象属性循环
与简单数组循环相对,下面的代码是对象属性循环
{ name } = { value }
this.obj = {
key1: 'value1',
key2: 1110.8900,
key3: Math.random()
}
注意,对象属性循环有性能问题,不推荐使用;
riotjs是通过JSON.stringify来判断对象是否有变更,以此来决定是否要更新HTML元素
key属性
你可以在循环标签的时候,使用key属性
- { user.name }
this.users = [
{ name: 'Gian', id: 0 },
{ name: 'Dan', id: 1 },
{ name: 'Teo', id: 2 }
]
你甚至可以给key属性赋值为方法
- { user.name }
this.users = [
{ name: 'Gian', id() { return 0 } },
{ name: 'Dan', id() { return 1 } },
{ name: 'Teo', id() { return 2 } }
]
虚拟标签
有的时候,你需要循环多个标签,但是你又不想在这多个标签上面套一个wrapper,
这个时候你就可以用虚拟标签,代码如下:
- {item.key}
- {item.value}
你可以在虚拟标签上添加if 或者 data-is属性
Show me with no wrapper on condition
HTML元素标签
你可以把HTML元素当作riot标签使用,但只能在body内这么用,如下:
riot.mount('my-list')
当你碰到这种情况的时候,你需要使用data-is属性
foo
bar
本系列写完了,祝好!
js循环解析html标签,riot.js教程【六】循环、HTML元素标签相关推荐
- js中while死循环语句_Java系列教程day06——循环语句
day06--循环语句 提纲: 1.循环结构 2.while循环 3.do-while循环 4.for循环 5.break语句 6.continue语句 7.循环嵌套 8.作业 一.循环结构 1.1 ...
- zblog php模板标签,Z-BlogPHP主题教程,zblogphp模板模块标签收藏
一般情况下主题应尽可能使用系统内部的模块管理功能来调用侧栏模块,系统内部内置5个侧栏,分别可以使用{template:sidebar}.{template:sidebar2}.{template:si ...
- riot.js教程【四】Mixins、HTML内嵌表达式
前文回顾 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法: riot.j ...
- riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法
基本要求 一个riot标签,就是展现和逻辑的组合(也就是html和JS) 以下是编写riot标签最基本的规则: 先撰写HTML,再撰写JS,JS代码可以写在<script>标签内部,但这并 ...
- JS线程与事件循环解析
JS是单线程,JS代码从上到下依次执行,但是单线程有一个非常大的问题,遇到耗时的任务,后面的任务只能等待它执行完,才能接着执行.比如ajax请求,从服务器上获取数据,本身是耗时的,如果遇到网络波动,就 ...
- 【从蛋壳到满天飞】JS 数据结构解析和算法实现-集合和映射
前言 [从蛋壳到满天飞]JS 数据结构解析和算法实现,全部文章大概的内容如下: Arrays(数组).Stacks(栈).Queues(队列).LinkedList(链表).Recursion(递归思 ...
- 前端面试题全面整理-带解析 涵盖CSS、JS、浏览器、Vue、React、移动web、前端性能、算法、Node...
来源 | https://www.html.cn/interview/13950.html 本篇文章整理总结了一些前端面试题,涵盖面很广,并且面的都是知名大厂,所以这些题还是很有代表性的,都掌握以后一 ...
- 【从蛋壳到满天飞】JS 数据结构解析和算法实现-AVL树(一)
前言 [从蛋壳到满天飞]JS 数据结构解析和算法实现,全部文章大概的内容如下: Arrays(数组).Stacks(栈).Queues(队列).LinkedList(链表).Recursion(递归思 ...
- 【从蛋壳到满天飞】JS 数据结构解析和算法实现-哈希表
前言 [从蛋壳到满天飞]JS 数据结构解析和算法实现,全部文章大概的内容如下: Arrays(数组).Stacks(栈).Queues(队列).LinkedList(链表).Recursion(递归思 ...
最新文章
- 信度效度难度区分度是什么意思_高考试题的效度信度区分度难度什么意思?
- [机器学习] Coursera ML笔记 - 逻辑回归(Logistic Regression)
- CV之FR(H+k机器学习):基于每人几张人脸图片训练H+k模型实现(国内外明星)新人脸图像的姓名预测(准确度高达100%)
- golang 位操作
- java为什么要定义接口_java为什么要定义接口等相关解释
- Spring Cloud Config入门(本地配置)
- SequenceFile文件
- 44年前的今天,改变世界的TA诞生了! | 极客头条
- 天地图卫星地图_AutoCAD使用卫星地图
- 【Antlr】Antlr语法设计
- java中的问题_java中一些常见问题
- 使用pienv安装python虚拟环境(学习记录)
- 安装oracle bi apps,Oracle BI Apps 11.1.1.7.1 系统安装(十一,配置ODI)
- python 爬虫抓取网页数据导出excel_如何用excel实现网页爬虫
- Natural_Earth 全球地形渲染图 Version 3.2
- 人工智能基础:人工智能云服务(Alaas)介绍
- UVALive 4670 Dominating Patterns(AC自动机)
- 网站漏洞检测之常见安全问题
- 视频倍速调整(ffmpeg)
- 搭建oa服务器后怎么接入到微信,微信oa是什么?微信如何与OA进行结合?