salesforce lightning零基础学习(八) Aura Js 浅谈一: Component篇
我们在开发lightning的时候,常常会在controller.js中写 component.get('v.label'), component.set('v.label','xxValue');
小伙伴肯定有疑问这些方法是怎么定义的,lightning到底有多少已经声明的方法可供我们使用,此篇主要讲述aura framework为我们提供的 component的js的主要方法。
本人salesforce环境切换到lightning,URL为:https://zero-zhang-dev-ed.lightning.force.com。
每个人的URL不同,URL 保留到force.com,然后添加一下URL: /auradocs/reference.app 即可看到aura的文档,aura文档里面给我们提供了aura framework 所有的支持的标签的描述以及使用,js的描述以及使用等等。此篇我们只是对 component的js进行说明,其他感兴趣的可以自行查看。
点击JavaScript API, 切换到 Component,可以查看到 Aura提供的所有的方法,常用的部分方法描述如下:
1. set (String key, Object value):此方法最为常见了,对 attribute 设置值的引用。
eg: component.set("v.testAttribute","hello lightning") : 此赋值逻辑代表 对 testAttribute 这个attribute 赋值,内容为“hello lightning”; 此方法通常用于对attribute赋值,这里不多做举例;
2.get(String key):此方法也是最为常见的,使用属性语法返回引用的值。通常有两种用法:
1)component.get("v.testAttribute"): 此逻辑代表获取当前component中attribute名称为testAttribute的值;
2)componnet.get("c.testAction"): 此逻辑代表获取后台apex controller中的 testAction方法,用于和后台交互操作,返回类型为Action对象变量,后期会对Action进行说明;
3.find(String | Object name):此方法用于通过local id 获取到指定的 component。我们知道lightning每个元素都默认有一个属性:aura:id, 此属性用来标记这个组件元素的local id,理论上local id是唯一的,但是实际操作中可以不唯一,所以find这个方法返回值可以有多种形式,如果 component中针对所查的local id有不止一个,则返回一个数组来盛接,如果有一个,则直接返回当前元素,如果不存在,则直接返回undefined;
eg: component.find("helloWorld"): 此逻辑代表获取 component 中local id为helloWorld的组件元素,如果不存在则返回undefined;
4.getLocalId(): 此方法用于获取组件元素的local id, 此方法通常用于通过事件获取事件的元素组件以后,获取元素组件的local id;
eg: TestComponent.cmp
<aura:component>
<lightning:button id="Global_Id" aura:id="Local_Id" label="Get Local Id"
onclick="{!c.getLocalId}"/>
</aura:component>
Controller.js 端
({
getLocalId : function(component, event, helper) {
var button = event.getSource();
console.log(button.getLocalId());
}
})
5. getGlobalId(): 此方法用于获取组件元素的global id, 此方法通常用于事件获取事件元素组件以后,获取元素组件的global id;
eg:
将上面的方法改成 getGlobalId即可;
({
getGlobalId : function(component, event, helper) {
var button = event.getSource();
console.log(button.getGlobalId());
}
})
6.getName():此方法用来获取当前的组件元素的名称。例如上面的TestComponent.cmp, 当我们在getGlobalId 增加 console.log(component.getName());时会打印出TestComponent;
7.getEvent(String eventName):通过component中注册的事件名称获取事件的实例化对象;
我们假设 component 中注册了一个事件 testEvent , 它对应了一个handler名字为 testHandler,当我们点击某个button时,会触发后台的方法,此方法用于获取到事件对象并触发此事件,执行此事件对应的handler;
testButtonHandler : function(component,event,helper) {
var testEvent = component.getEvent('testEvent');
testEvent.setParam('testEventParam','testValue');
testEvent.fire();
}
8.getReference(String key):此方法通常用于动态创建component时使用,通过属性语法返回这个值的一个实体引用。比如动态创建 button时,我们想让他的handler为controller.js中已有的一个方法testHandler作为handler,我们就可以使用 getReference('testHandler')获取到这个方法的实体引用,在$A.createComponent我们在对这个进行demo。除了可以经常用于动态创建component,我们也可以在addEventHandler进行使用,下面的函数会有此种方式的demo;
9.addEventHandler (String event, function handler, String phase, Boolean includeFacets):动态的创建事件的handler,此方法有几个参数:
event: event的名字,这个名字需要和 aura:registerEvent名字保持一致;
handler:针对这个事件想要动态处理的handler,此handler可以有两种方式,一种是通过 component.getReference方法使用现有的handler,另外一种是通过异步方法块去执行handler部分;
phase:Bubble / Capture, 对这部分不了解的可以参看:https://www.cnblogs.com/zero-zyq/p/9313371.html
includeFacets:如果设置为true,则尝试捕捉通过facet生成的元素的事件;
我们在https://www.cnblogs.com/zero-zyq/p/9313371.html有过demo测试过多层元素套用情况下事件阶段的展示,我们将eventBubblingEmitterController.js进行代码修改:使用动态创建事件handler方式进行创建,当按照事件执行排序执行到eventBubblingEmitter.component时,会执行testEventHandler方法。
({
fireEvent : function(cmp) {
cmp.addEventHandler('bubblingEvent', cmp.getReference('c.testEventHandler'));
var cmpEvent = cmp.getEvent("bubblingEvent");
cmpEvent.fire();
},
testEventHandler : function(cmp) {
console.log('test event handler');
}
})
执行效果:
总结:此篇只是简单的描述了Aura Framework中的Component 类常用的方法,其他的方法感兴趣的自行查看,篇中有错误的内容欢迎指出,不懂得欢迎留言。
salesforce lightning零基础学习(八) Aura Js 浅谈一: Component篇的更多相关文章
- salesforce lightning零基础学习(九) Aura Js 浅谈二: Event篇
上一篇介绍了Aura Framework中 Component类的部分方法,本篇将要介绍Event常用的方法. 1. setParam (String key , Object value):设置事件 ...
- salesforce lightning零基础学习(十) Aura Js 浅谈三: $A、Action、Util篇
前两篇分别介绍了Component类以及Event类,此篇将会说一下 $A , Action以及 Util. 一. Action Action类通常用于和apex后台交互,设置参数,调用后台以及对结 ...
- salesforce lightning零基础学习(十一) Aura框架下APP构造实现
前面的一些lightning文章讲述了aura的基础知识,aura封装的常用js以及aura下的事件处理.本篇通过官方的一个superbadge来实现一个single APP的实现. superbad ...
- salesforce lightning零基础学习(十四) Toast 浅入浅出
本篇参考: https://developer.salesforce.com/docs/component-library/bundle/force:showToast/specification h ...
- salesforce lightning零基础学习(十七) 实现上传 Excel解析其内容
本篇参考: https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader https://github.com/SheetJS/sheetjs ...
- salesforce lightning零基础学习(十五) 公用组件之 获取表字段的Picklist(多语言)
此篇参考:salesforce 零基础学习(六十二)获取sObject中类型为Picklist的field values(含record type) 我们在lightning中在前台会经常碰到获取pi ...
- salesforce lightning零基础学习(一) lightning简单介绍以及org开启lightning
lightning对于开发salesforce人员来说并不陌生,即使没有做过lightning开发,这个名字肯定也是耳熟能详.原来的博客基本都是基于classic基于配置以及开发,后期博客会以ligh ...
- salesforce lightning零基础学习(二) lightning 知识简单介绍----lightning事件驱动模型
看此篇博客前或者后,看一下trailhead可以加深印象以及理解的更好:https://trailhead.salesforce.com/modules/lex_dev_lc_basics 做过cla ...
- salesforce lightning零基础学习(三) 表达式的!(绑定表达式)与 #(非绑定表达式)
在salesforce的classic中,我们使用{!expresion}在前台页面展示信息,在lightning中,上一篇我们也提及了,如果展示attribute的值,可以使用{!v.expresi ...
随机推荐
- webapi postman 415 错误
https://blog.csdn.net/Intangible_moon/article/details/80183121 猜测:如果后台接口使用的是[fromBody]标签的话,需要使用raw方式
- Linux系统中的tar命令
时间一长什么东西都容易忘记,尤其是一些不常用的东西忘记的更快,所以避免忘记,就记录下来,可以方面使用的时候查询.Tar命令在linux系统中算是一个比较重要的命令,今天就针对该命令进行总结一下. 1. ...
- C语言输出格雷码
格雷码是以n位的二进制来表示数. 与普通的二进制表示不同的是,它要求相邻两个数字只能有1个数位不同. 首尾两个数字也要求只有1位之差. 有很多算法来生成格雷码.以下是较常见的一种: 从编码全0开始生成 ...
- [字符串]TrBBnsformBBtion
TrBBnsformBBtion Let us consider the following operations on a string consisting of A and B: Select ...
- python基础之Day13
一.有参装饰器 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...
- service redis start
注意:需在redis-server所在目录执行
- 操作系统学习笔记(二) 页式映射及windbg验证方式
页式映射 本系列截图来自网络搜索及以下基本书籍: <Windows内核设计思想> <Windows内核情景分析> <WINDOWS内核原理与实现> 一个32位虚拟地 ...
- 游戏脚本编程 文本token解析
一个数字的组成由以下几个字符 正负号 + - 小数点 . 数字 0-9 比如 3 -3 3.13 -34.2234 但是符号和小数点不会出现多次 那么识别流程用图来表示 则是 整数 浮点数 一 ...
- js检测输入域的值是否变化
场景: 用户在新建或编辑表单数据时,操作关闭按钮,如果有输入项已经变动时,提示用户存在信息变更,是否放弃当前操作. 初始值情景: 1.通过原生的value指定,如: <input value=' ...
- 别人的Linux私房菜(8)Linux磁盘与文件系统管理
虚拟机的磁盘通常为:/dev/vd[a-p] LVM和软件磁盘阵列 software RAID可以将一个分区格式化为多个文件系统或者多个分区格式化为一个文件系统. 索引式文件系统中:如ext2.ext ...