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效果.在页面往回滚动时,元素会恢复到原来的状态 ...
随机推荐
- JSP获取input(含正则表达式)
<%@page contentType="text/html"%> <%@page pageEncoding="UTF-8"%> < ...
- JavaWeb(三)JSP概述
一.JSP概述 1.1.JSP简介 一种动态网页开发技术.它使用JSP标签在HTML网页中插入Java代码.标签通常以<%开头以%>结束.JSP是一种Java servlet,主要用于实现 ...
- LeetCode-Palindromic Substrings
package Classify.DP.Medium; import org.junit.jupiter.api.Test; public class PalindromicSubstrings { ...
- HDU2066 一个人的旅行 最短路基础
新手熟悉一下迪杰斯特拉... 一个人的旅行 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
- Django自定义过滤器中is_safe和need_autoescape两个参数的理解
自定义template过滤器的方法参考文档,不再赘述 is_safe 文档说明过滤的两种最终形态,其中一种是设置register.filter(is_safe=True),但是对is_safe的具体作 ...
- canvas图表详解系列(3):动态饼状图(原生Js仿echarts饼状图)
本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...
- sublime addons backup
1.you can create a file to store you installed addons and use git to store github.com just like that ...
- XtraReports 入门教程
一个链接:http://www.cnblogs.com/springSky/tag/XtraReports%20%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/ 与之相同功能 ...
- Linux系列教程(二)——Linux系统安装(手把手学安装centos6.8)
在上一篇博客我们简单的介绍了Linux系统的起源,这篇博客我们将通过图示一步一步教大家如何安装Linux系统.注意这里我们选择安装的Linux系统是其一种发行版本 CentOS,这里给大家普及一个概念 ...
- WPF DataGrid复制单元格问题
当复制出现 以下错误时:System.Runtime.InteropServices.COMException (0x800401D0),这是在WPF剪贴板程序错误. 解决方法:则在需要在App.xa ...