前文回顾

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

riot.js教程【一】简介;

访问DOM元素

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

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

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

使用Jquery

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

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

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

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

请看如下代码:

  1. <example-tag>
  2. <p id="findMe">Do I even Exist?</p>
  3. <script>
  4. var test1 = document.getElementById('findMe')
  5. console.log('test1', test1) // Fails
  6. this.on('update', function(){
  7. var test2 = document.getElementById('findMe')
  8. console.log('test2', test2) // Succeeds, fires on every update
  9. })
  10. this.on('mount', function(){
  11. var test3 = document.getElementById('findMe')
  12. console.log('test3', test3) // Succeeds, fires once (per mount)
  13. })
  14. </script>
  15. </example-tag>

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

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

  1. <example-tag>
  2. <p id="findMe">Do I even Exist?</p>
  3. <p>Is this real life?</p>
  4. <p>Or just fantasy?</p>
  5. <script>
  6. this.on('mount', function(){
  7. // Contexted jQuery
  8. $('p', this.root)
  9. // Contexted Query Selector
  10. this.root.querySelectorAll('p')
  11. })
  12. </script>
  13. </example-tag>

mount输入参数

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

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

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

可以是一个简单的object;

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

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

  1. <my-tag>
  2. <!-- Options in HTML -->
  3. <h3>{ opts.title }</h3>
  4. // Options in JavaScript
  5. var title = opts.title
  6. </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事件

监听生命周期事件

  1. <todo>
  2. this.on('before-mount', function() {
  3. // before the tag is mounted
  4. })
  5. this.on('mount', function() {
  6. // right after the tag is mounted on the page
  7. })
  8. this.on('update', function() {
  9. // allows recalculation of context data before the update
  10. })
  11. this.on('updated', function() {
  12. // right after the tag template is updated after an update call
  13. })
  14. this.on('before-unmount', function() {
  15. // before the tag is removed
  16. })
  17. this.on('unmount', function() {
  18. // when the tag is removed from the page
  19. })
  20. // curious about all events ?
  21. this.on('*', function(eventName) {
  22. console.info(eventName)
  23. })
  24. </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. JSP获取input(含正则表达式)

    <%@page contentType="text/html"%> <%@page pageEncoding="UTF-8"%> < ...

  2. JavaWeb(三)JSP概述

    一.JSP概述 1.1.JSP简介 一种动态网页开发技术.它使用JSP标签在HTML网页中插入Java代码.标签通常以<%开头以%>结束.JSP是一种Java servlet,主要用于实现 ...

  3. LeetCode-Palindromic Substrings

    package Classify.DP.Medium; import org.junit.jupiter.api.Test; public class PalindromicSubstrings { ...

  4. HDU2066 一个人的旅行 最短路基础

    新手熟悉一下迪杰斯特拉... 一个人的旅行 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  5. Django自定义过滤器中is_safe和need_autoescape两个参数的理解

    自定义template过滤器的方法参考文档,不再赘述 is_safe 文档说明过滤的两种最终形态,其中一种是设置register.filter(is_safe=True),但是对is_safe的具体作 ...

  6. canvas图表详解系列(3):动态饼状图(原生Js仿echarts饼状图)

    本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...

  7. sublime addons backup

    1.you can create a file to store you installed addons and use git to store github.com just like that ...

  8. XtraReports 入门教程

    一个链接:http://www.cnblogs.com/springSky/tag/XtraReports%20%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/ 与之相同功能 ...

  9. Linux系列教程(二)——Linux系统安装(手把手学安装centos6.8)

    在上一篇博客我们简单的介绍了Linux系统的起源,这篇博客我们将通过图示一步一步教大家如何安装Linux系统.注意这里我们选择安装的Linux系统是其一种发行版本 CentOS,这里给大家普及一个概念 ...

  10. WPF DataGrid复制单元格问题

    当复制出现 以下错误时:System.Runtime.InteropServices.COMException (0x800401D0),这是在WPF剪贴板程序错误. 解决方法:则在需要在App.xa ...