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>


本系列写完了,祝好!

时间: 2024-12-06 04:11:03

riot.js教程【六】循环、HTML元素标签的相关文章

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

前文回顾riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法:riot.js教程[一]简介: 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可以使用 比如:if="{...}",(有时候你需要对这些东西做一些特殊的处理才能用) 使用Jquery 如果你想在riot标签内部访问dom元素 你可能需要了解一下riot标签生命周期相关的知识 你会注意到,mount方法还没执行的时候,dom元素是不会被创建的 这就意味着,mount方法

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&quo

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

前文回顾riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期:riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法:riot.js教程[一]简介: 共享Mixins 混合开发可以使你很好的复用代码,如下所示: var OptsMixin = { // the `opts` argument is the option object received by the tag as well init: function(opts) {

riot.js教程【一】简介

题记 这是一个系列文章的第一篇 如果关注riot.js的人,可以关注我的博客: 我接下来会持续不断的发这一块的文章: 系列文章内容大多来自官网翻译:  Riotjs简介 Riotjs是一款简单的.优雅的.组件化UI前端开发框架: 他支持自定义标签(custom tags),拥有令人愉悦的语法,优雅的API和非常小的体积: 为什么需要一个新的界面库 前端开发框架的确已经非常多了,但还是没有令人足够满意的东西,reactjs貌似是来解决问题的,但是用过的人都知道,它有很多令人不爽的弱点,我们相信Ri

JS 使用for循环遍历子节点查找元素_javascript技巧

这篇文章主要介绍了JS 使用for循环配合数组遍历子节点查找元素 function nextChildNode(node,clazz,tagName){ var count= node.childElementCount; for(var i=0;i<count;i++){ if(node==undefined || node.children[i]==undefined){ continue; } if(clazz){ if(node.children[i].getAttribute('cla

Jquery和Js获得元素标签名称的方法总结_jquery

Jquery 和 Javascript 获得元素标签名称是通过tagName的属性获取的. 这里提供高版本 Jquery的获取元素标签名称的方法: 1.$( this ).get(0).tagName 2.$( this )[0].tagName 3.$( this ).prop("tagName") 4.$( this ).prop("nodeName")

dom-HTML DOM和元素标签是一个意思吗?

问题描述 HTML DOM和元素标签是一个意思吗? 点击这里 这个是元素标签?document.getElementById(""myBtn"") 这个是DOM? 解决方案 这个需要弄清楚实际的文档和Dom的区别.Dom的翻译是文档对象模型,它是一个模型,而这个模具就是文档.Dom将实际的文档通过另外一种形式来表现它.(也就是Dom节点树)回答你的问题:元素标签(位于文档)对应着元素节点(位于Dom节点树).区别是Dom里面的元素节点是个对象,拥有属性和方法.而元素

js教程:JavaScript For...In 方法及实例教程

js教程:JavaScript For...In 方法及实例教程 在为...在一份声明中是用来循环(重复)通过要素的一个数组,或通过性能的一个对象. 范例 对于在声明中... 如何使用的...在一份声明中循环的要素一个数组. <html> <body> <script type="text/javascript"> var x; var mycars = new Array(); mycars[0] = "Saab"; mycar

Android简明开发教程六:用户界面设计

Activity是Android应用用户界面的基本组成部件.但Activity本身并不提供用户界面(User Interface).从程序结构层次上 来说,一个Android应用是类android.app.Application的一个实例, Application中可以包含多个android.app.Activity实例. 每个Activity 带一个Window类,这个类在Android平台上没有提供太多功能,主要可以用来控制标题栏(屏幕顶端).比如设置 UI全屏显示可以使用如下代码: req