前文回顾

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

riot.js教程【一】简介;

访问DOM元素

你可以通过this.refs对象访问dom元素

而且还有大量的属性简写方式可以使用

比如:if="{...}",(有时候你需要对这些东西做一些特殊的处理才能用)

使用Jquery

如果你想在riot标签内部访问dom元素

你可能需要了解一下riot标签生命周期相关的知识

你会注意到,mount方法还没执行的时候,dom元素是不会被创建的

这就意味着,mount方法之前访问DOM元素,是不会成功的

请看如下代码:

<example-tag>
<p id="findMe">Do I even Exist?</p>
<script>
var test1 = document.getElementById('findMe')
console.log('test1', test1) // Fails
this.on('update', function(){
var test2 = document.getElementById('findMe')
console.log('test2', test2) // Succeeds, fires on every update
})
this.on('mount', function(){
var test3 = document.getElementById('findMe')
console.log('test3', test3) // Succeeds, fires once (per mount)
})
</script>
</example-tag>

也就是说,你只要在正确的函数中使用jquery是一点问题都没有的;

再看下面的代码(两种检索方式都是支持的,第一种就是jquery检索DOM)

<example-tag>
<p id="findMe">Do I even Exist?</p>
<p>Is this real life?</p>
<p>Or just fantasy?</p>
<script>
this.on('mount', function(){
// Contexted jQuery
$('p', this.root) // Contexted Query Selector
this.root.querySelectorAll('p')
})
</script>
</example-tag>

mount输入参数

你可以在初始化的时候为riotjs标签传入更多参数,比如:

<script>
riot.mount('todo', { title: 'My TODO app', items: [ ... ] })
</script>

你可以传递任何类型的数据;

可以是一个简单的object;

也可以是动态变化的数据存储(flux store)

在标签内部,你可以使用如下方法访问这些输入参数

<my-tag>
<!-- Options in HTML -->
<h3>{ opts.title }</h3>
// Options in JavaScript
var title = opts.title
</my-tag>

riotjs标签的生命周期

riotjs标签按照如下步骤构造及渲染

  1. Tag构造
  2. Tag内部的js执行
  3. Tag内部的HTML中的表达式被执行
  4. Tag在浏览器上渲染,mount事件触发

一个riotjs标签在浏览器上渲染,mount事件触发后,何时会被更新呢?

  1. 当一个Tag内的事件被触发的时候(除非你设置了禁止更新变量e.preventUpdate为true)
  2. 当在Tag实例内部调用this.update()的时候
  3. 当在一个父组件实例内部调用this.update()的时候(该父组件下的所有子组件都会更新)
  4. 当调用riot.update()的时候(会触发全局更新)

当一个组件执行更新后,会触发update事件

监听生命周期事件

<todo>

  this.on('before-mount', function() {
// before the tag is mounted
}) this.on('mount', function() {
// right after the tag is mounted on the page
}) this.on('update', function() {
// allows recalculation of context data before the update
}) this.on('updated', function() {
// right after the tag template is updated after an update call
}) this.on('before-unmount', function() {
// before the tag is removed
}) this.on('unmount', function() {
// when the tag is removed from the page
}) // curious about all events ?
this.on('*', function(eventName) {
console.info(eventName)
}) </todo>

你可以为一个事件设置多个监听

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

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

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

  2. riot.js教程【六】循环、HTML元素标签

    前文回顾 riot.js教程[五]标签嵌套.命名元素.事件.标签条件 riot.js教程[四]Mixins.HTML内嵌表达式 riot.js教程[三]访问DOM元素.使用jquery.mount输入 ...

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

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

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

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

  5. DOM学习笔记(三)DOM元素的访问、修改与事件

    访问 HTML 元素等同于访问节点,使用的是document对象下的数个getElement方法,然后再对返回的元素(或元素列表)进行具体内容的访问和修改,或者响应对应的事件是操作 一些 DOM 对象 ...

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

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

  7. js | javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  8. 使用dom元素和jquery元素实现简单增删改的练习

    软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquer ...

  9. aos.js超赞页面滚动元素动画jQuery动画库

    插件描述:aos.js 是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态 ...

随机推荐

  1. AIM Tech Round 4 (Div. 2)ABCD

    A. Diversity time limit per test 1 second memory limit per test 256 megabytes input standard input o ...

  2. http://codeforces.com/contest/838/problem/A

    A. Binary Blocks time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  3. Python自学笔记-filter()函数(来自廖雪峰的官网Python3)

    感觉廖雪峰的官网http://www.liaoxuefeng.com/里面的教程不错,所以学习一下,把需要复习的摘抄一下. 以下内容主要为了自己复习用,详细内容请登录廖雪峰的官网查看. Python内 ...

  4. 编译LNMP之nginx+php-fpm

    html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...

  5. 配置zabbix agent向多个server发送数据

    1.背景: agent 端:dba-test-hzj02  172.16.59.197 server端:172.16.59.197  ,172.16.59.98 2.方式: 配置多个server,se ...

  6. HDU2036 改革春风吹满地

    第一次看到这题果断放弃,毕竟几何白痴,第二次刷没做的题的时候突然想到这个三角形面积的向量法:S=|x1*y2-x2*y1|  但是此题可能是凹多边形,所以不能加绝对值,可以画个凹四边形看看. HDU2 ...

  7. plsql部分字段中文乱码,sqlplus中文乱码

    PLSQL中文乱码 问题: 解决: 思路1:设置 export NLS_LANG="SIMPLIFIED CHINESE_CHINA.ZHS16GBK" 结果:并不能解决问题!   ...

  8. java虚拟机指令dup的理解

    举个例子: public class ExceptionTest{ void cantBeZero(int i) throws Exception{ throw new Exception(); } ...

  9. Nhibernate/Hibernate 使用多参数存儲過程 出現could not execute query,Could not locate named parameter等錯誤解決

    <?xml version="1.0" encoding="utf-8" ?> <hibernate-mapping xmlns=" ...

  10. win10 uwp 获得元素绝对坐标

    有时候需要获得一个元素,相对窗口的坐标,在修改他的位置可以使用. 那么 UWP 如何获得元素坐标? 我提供了一个方法,可以获得元素的坐标. 首先需要获得元素,如果没有获得元素,那么如何得到他的坐标? ...