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方法,用于和后台交互操作;

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对象常用的方法,其他的方法感兴趣的自行查看,篇中有错误的内容欢迎指出,不懂得欢迎留言。

原文地址:https://www.cnblogs.com/zero-zyq/p/9892767.html

时间: 2024-07-29 01:19:23

salesforce lightning零基础学习(八) Aura Js 浅谈一: Component篇的相关文章

salesforce lightning零基础学习(九) Aura Js 浅谈二: Event篇

上一篇介绍了Aura Framework中 Component类的部分方法,本篇将要介绍Event常用的方法. 1. setParam (String key , Object value):设置事件的param,此项设置不会修改已经被触发的事件.我们在创建事件的时候可以同时声明attribute,在我们fire事件以前,可以对这些attribute设置值,其中key为attribute的name,value部分即为attribute的value. 2.setParams (Object con

salesforce lightning零基础学习(三) 表达式的!(绑定表达式)与 #(非绑定表达式)

在salesforce的classic中,我们使用{!expresion}在前台页面展示信息,在lightning中,上一篇我们也提及了,如果展示attribute的值,可以使用{!v.expresion}展示信息. lightning在component中解析动态值的时候,会将{!} 这个里面的变量进行动态的解析以及展示.当然这个变量可以是基础类型,自定义类型,数组集合等等,当然如果表达式为空字符串或者是空格则不会解析.偶尔特殊的要求为需要输出'{!}'这个字符串,官方文档说可以使用<aura

salesforce lightning零基础学习(七) 列表展示数据时两种自定义编辑页面

上一篇Lightning内容描述的是LDS,通过LDS可以很方便的实例化一个对象的数据信息.当我们通过列表展示数据需要编辑时,我们常使用两种方式去处理编辑页面:Pop Up Window弹出修改详情以及在本页面隐藏详情页面显示编辑页面. 实现这个功能以前主要需要先了解几个标签: lightning:recordForm: 此标签允许用户快速的创建一个form去查看,添加以及修改一条记录.集合了 lightning:recordEditForm 以及 lightning:recordViewFor

salesforce lightning零基础学习(十三) 自定义Lookup组件(Single &amp; Multiple)

上一篇简单的介绍了自定义的Lookup单选的组件,功能为通过引用组件Attribute传递相关的sObject Name,捕捉用户输入的信息,从而实现搜索的功能. 我们做项目的时候,可能要从多个表中获取数据并且选择相关的记录(单选或者多选),也可能要获取不同的变量的值,不一定是Name字段,也有可能在对某个表进行关键字搜索基础上有额外的条件过滤.此公用组件在上述的背景下进行开发,安装地址如下:https://login.salesforce.com/packaging/installPackag

salesforce lightning零基础学习(六)Lightning Data Service(LDS)

本篇可参看:https://trailhead.salesforce.com/modules/lightning_data_service Lightning中针对object的detail页面,一个lightning app可能包含了多个components,多个components不可避免的会对这个数据进行CRUD操作,如果我们针对每个component都在init操作时后台SQL进行查询,然后赋值给前台变量,进行CUD操作时,还要考虑其他component的数据是否要级联的改变,这种操作以

salesforce lightning零基础学习(四) 事件(component events)简单介绍

lightning component基于事件驱动模型来处理用户界面的交互.这种事件驱动模型和js的事件驱动模型也很相似,可以简单的理解成四部分: 1.事件源:产生事件的地方,可以是页面中的输入框,按钮等等: 2.事件: 点击,失去焦点,初始化等等: 3.事件对象:当在事件源触发某个事件的时候,一般会产生一个事件对象,记录着事件的事件源相关信息以及相关的事件信息: 4.事件处理程序(Event Handler):对当前的事件进行程序的处理或者函数. 接下来回到lightning中.在lightn

零基础学习hadoop到上手工作线路指导初级篇:hive及mapreduce(转)

零基础学习hadoop到上手工作线路指导初级篇:hive及mapreduce:http://www.aboutyun.com/thread-7567-1-1.html mapreduce学习目录总结 MapReduce学习指导及疑难解惑汇总:http://www.aboutyun.com/thread-7091-1-1.html 什么是Map/Reduce:http://www.aboutyun.com/thread-5541-1-1.html Mapreduce 整个工作机制图:http://

salesforce 零基础学习(五十二)Trigger使用篇(二)

第十七篇的Trigger用法为通过Handler方式实现Trigger的封装,此种好处是一个Handler对应一个sObject,使本该在Trigger中写的代码分到Handler中,代码更加清晰. 十七篇链接:salesforce 零基础学习(十七)Trigger用法 有的时候对于sObject的trigger处理复杂的情况下,比如一个sObject的before update要实现功能1,2.....n功能情况下,Handler中需要在before update写实现功能1--n的代码.然而

零基础学习hadoop到上手工作线路指导初级篇:hive及mapreduce

此篇是在零基础学习hadoop到上手工作线路指导(初级篇)的基础,一个继续总结.五一假期:在写点内容,也算是总结.上面我们会了基本的编程,我们需要对hadoop有一个更深的理解:hadoop分为hadoop1.X.hadoop2.X,并且还有hadoop生态系统.这里只能慢慢介绍了.一口也吃不成胖子. hadoop 1.x分为mapreduce与hdfs 其中mapreduce是很多人都需要迈过去的槛,它比较难以理解,我们有时候即使写出了mapreduce程序,但是还是摸不着头脑.我们不知道ke