riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期
访问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标签按照如下步骤构造及渲染
- Tag构造
- Tag内部的js执行
- Tag内部的HTML中的表达式被执行
- Tag在浏览器上渲染,mount事件触发
一个riotjs标签在浏览器上渲染,mount事件触发后,何时会被更新呢?
- 当一个Tag内的事件被触发的时候(除非你设置了禁止更新变量e.preventUpdate为true)
- 当在Tag实例内部调用this.update()的时候
- 当在一个父组件实例内部调用this.update()的时候(该父组件下的所有子组件都会更新)
- 当调用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标签的生命周期的更多相关文章
- riot.js教程【五】标签嵌套、命名元素、事件、标签条件
前文回顾 riot.js教程[四]Mixins.HTML内嵌表达式 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二] ...
- riot.js教程【六】循环、HTML元素标签
前文回顾 riot.js教程[五]标签嵌套.命名元素.事件.标签条件 riot.js教程[四]Mixins.HTML内嵌表达式 riot.js教程[三]访问DOM元素.使用jquery.mount输入 ...
- riot.js教程【四】Mixins、HTML内嵌表达式
前文回顾 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法: riot.j ...
- riot.js教程【一】简介
Riotjs简介 Riotjs是一款简单的.优雅的.组件化UI前端开发框架: 他支持自定义标签(custom tags),拥有令人愉悦的语法,优雅的API和非常小的体积: 为什么需要一个新的界面库 前 ...
- DOM学习笔记(三)DOM元素的访问、修改与事件
访问 HTML 元素等同于访问节点,使用的是document对象下的数个getElement方法,然后再对返回的元素(或元素列表)进行具体内容的访问和修改,或者响应对应的事件是操作 一些 DOM 对象 ...
- riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法
基本要求 一个riot标签,就是展现和逻辑的组合(也就是html和JS): 以下是编写riot标签最基本的规则: 先撰写HTML,再撰写JS,JS代码可以写在<script>标签内部,但这 ...
- js | javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- 使用dom元素和jquery元素实现简单增删改的练习
软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquer ...
- aos.js超赞页面滚动元素动画jQuery动画库
插件描述:aos.js 是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态 ...
随机推荐
- 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 ...
- 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 ...
- Python自学笔记-filter()函数(来自廖雪峰的官网Python3)
感觉廖雪峰的官网http://www.liaoxuefeng.com/里面的教程不错,所以学习一下,把需要复习的摘抄一下. 以下内容主要为了自己复习用,详细内容请登录廖雪峰的官网查看. Python内 ...
- 编译LNMP之nginx+php-fpm
html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...
- 配置zabbix agent向多个server发送数据
1.背景: agent 端:dba-test-hzj02 172.16.59.197 server端:172.16.59.197 ,172.16.59.98 2.方式: 配置多个server,se ...
- HDU2036 改革春风吹满地
第一次看到这题果断放弃,毕竟几何白痴,第二次刷没做的题的时候突然想到这个三角形面积的向量法:S=|x1*y2-x2*y1| 但是此题可能是凹多边形,所以不能加绝对值,可以画个凹四边形看看. HDU2 ...
- plsql部分字段中文乱码,sqlplus中文乱码
PLSQL中文乱码 问题: 解决: 思路1:设置 export NLS_LANG="SIMPLIFIED CHINESE_CHINA.ZHS16GBK" 结果:并不能解决问题! ...
- java虚拟机指令dup的理解
举个例子: public class ExceptionTest{ void cantBeZero(int i) throws Exception{ throw new Exception(); } ...
- Nhibernate/Hibernate 使用多参数存儲過程 出現could not execute query,Could not locate named parameter等錯誤解決
<?xml version="1.0" encoding="utf-8" ?> <hibernate-mapping xmlns=" ...
- win10 uwp 获得元素绝对坐标
有时候需要获得一个元素,相对窗口的坐标,在修改他的位置可以使用. 那么 UWP 如何获得元素坐标? 我提供了一个方法,可以获得元素的坐标. 首先需要获得元素,如果没有获得元素,那么如何得到他的坐标? ...