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>

本系列写完了,祝好!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知道一点点

sass学习入门篇(三)

这章我们讲“嵌套”,嵌套包括两种:一,选择器嵌套。二是属性的嵌套。一般用选择器嵌套居多

11460
来自专栏十月梦想

js获取元素的几种形式

注意:通过class,name标签名抓取的元素是一个集合,即使该类只有一个符合要求的元素目标,也返回是一个集合,因此可以存储的变量,通过变量名[0]获得第一个符...

35330
来自专栏HTML5学堂

JQuery选择器(中)

HTML5学堂:在学习JQuery开发的时候,选择器有多种,而我们将接着介绍选择器的其他类型,希望对大家有帮助! 5.临近选择器: $("mix+mix"),选...

38790
来自专栏互联网杂技

HTML5中类jQuery选择器querySelector的使用

简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从...

37870
来自专栏程序员的知识天地

H5学习从0到1-H5的块标签的使用(9)

8030
来自专栏Android先生

Android开发人员不得不学习的Vue.js基础

Vue是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一...

15320
来自专栏HTML5学堂

一个setInterval的小问题

一个setInterval的小问题 HTML5学堂:在制作页面动画效果中,很多情况都会用到定时器,setInterval则是计时器的一种,可按照指定的周期,不停...

36790
来自专栏JavaEdge

全面入门jQuery最佳实践(二)-jQuery的属性与样式1 .attr()与.removeAttr()2 html()及.text()

每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息。如:在img元素中,src就是元素的特性,用来标记图片的地址。

12530
来自专栏IMWeb前端团队

JavaScript强化教程——style、currentStyle、getComputedStyle区别介绍

本文为 H5EDU 机构官方 HTML5教程,主要介绍:JavaScript强化教程 —— style、currentStyle、getComputedStyl...

24460
来自专栏Hongten

HTML DOC

HTML 文档中的所有节点组成了一个文档树(或节点树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直...

13110

扫码关注云+社区

领取腾讯云代金券