Salesforce学习之路(十三)Aura案例实战分析
Aura相关知识整合:
Salesforce学习之路(十一)Aura组件属性<aura:attribute />
1. Parent组件
parentAura.cmp
<!--Parent component-->
<!--controller类名:ParentAuraController-->
<!--force:appHostable: 该组件可作为Lightning Experience的导航元素-->
<!--flexipage:availabeForAllPageTypes: 可在Lightning App Builder中使用,也做作为Page使用-->
<!--access=global: 该组件在所有的Orgs中都可以被引用-->
<aura:component controller="ParentAuraController"
implements="force:appHostable,flexipage:availableForAllPageTypes"
access="global"> <aura:attribute name="displayMonths" type="String[]" />
<aura:attribute name="selectedDisplayMonth" type="String" />
<aura:attribute name="displayMonth" type="String" default="Last 6 Months"/>
<aura:attribute name="read" type="Boolean" default="false" /> <!--组件初始化操作-->
<aura:handler name="init" value="{!this}" action="{!c.handleInit}" /> <div class="white">
<lightning:layout multipleRows="true">
<lightning:layoutItem size="4" padding="around-small">
<!--下拉框选择组件,selectedDisplayMonth为下拉框选择的值,displayMonths为下拉框值列表-->
<!--onchange: selectedDisplayMonth值改变时,调用controller.js中changeDisplayMonth函数-->
<lightning:select name="displayMonthId" label="Select display months" aura:id="displayMonthId"
value="{!v.selectedDisplayMonth}" required="true" onchange="{!c.changeDisplayMonth}">
<aura:iteration items="{!v.displayMonths}" var="displayMonth">
<option text="{!displayMonth}"></option>
</aura:iteration>
</lightning:select>
</lightning:layoutItem> <lightning:layoutItem size="6" padding="around-small">
<div class="slds-p-top--large">
<!--按钮组件,label为界面显示值;onclick: 点击按钮时触发controller.js中applyHandle函数-->
<!--display: true表示按钮灰掉,无法操作;false表示正常工作-->
<lightning:button label="parentApply" onclick="{!c.applyHandle}" disabled="false" />
</div>
</lightning:layoutItem>
</lightning:layout>
<lightning:layout multipleRows="true">
<lightning:layoutItem size="12" padding="around-small">
<li>
<!--三元表达式-->
<aura:if isTrue="{!v.read}">
you can read it.
<aura:set attribute="else">
you cannot read it.
</aura:set>
</aura:if>
</li>
<li>displayMonth in parent: {!v.displayMonth}</li>
</lightning:layoutItem>
</lightning:layout>
<lightning:layout multipleRows="true">
<lightning:layoutItem size="12" padding="around-small">
<!--实例化childAura组件-->
<c:childAura childDisplayMonth="{!v.displayMonth}" />
</lightning:layoutItem>
</lightning:layout>
</div>
</aura:component>
parentAura.css
.THIS {
background-color: grey;
} .THIS.white {
background-color: white;
}
parentAuraController.js
({
handleInit: function (cmp, event, helper) {
// 初始化组件时,调用Help.js中getDisplayMonths函数,获取下拉框值列表
helper.getDisplayMonths(cmp);
}, changeDisplayMonth: function (cmp, event, helper) {
console.log("displayMonths: " + cmp.get('v.displayMonths'))
console.log("selected displayMonth: " + cmp.get('v.selectedDisplayMonth')); }, applyHandle: function (cmp, event, helper) {
// 点击parentApply按钮时,将下拉框选中的值赋值给属性displayMonth
cmp.set('v.displayMonth', cmp.get('v.selectedDisplayMonth'));
// 点击parentApply按钮时,将true赋值给属性read.
cmp.set('v.read', "true");
console.log("after click apply, displayMonth: " + cmp.get('v.displayMonth'));
}
})
parentAuraHelper.js
({
getDisplayMonths : function(cmp) {
// 获取controll.cls类中getDisplayMonths函数
var action = cmp.get("c.getDisplayMonths");
// 为该函数设置回调函数
action.setCallback(this, function (response) {
var status = response.getState();
console.log("get displayMonths: " + status);
// 判断调用controller.cls类getDisplayMonths函数的响应状态码
if (status == "SUCCESS") {
// 解析controller.cls传回的响应,并赋值给变量repsonseBody
var responseBody = JSON.parse(response.getReturnValue());
// 将变量responseBody赋值给组件属性displayMonths(下拉框值列表)
cmp.set("v.displayMonths", responseBody);
}
});
// 执行获取数据行动
$A.enqueueAction(action);
}
})
ParentAuraController.cls
public with sharing class ParentAuraController {
@AuraEnabled
public static String getDisplayMonths() {
List<String> displayMonths = new List<String>();
displayMonths.add('Last 6 Months');
displayMonths.add('Last 12 Months');
displayMonths.add('Last 18 Months');
displayMonths.add('Last 36 Months');
// 将响应序列化为Json格式
return JSON.serialize(displayMonths);
}
}
2. Child组件
childAura.cmp
<!--Child component-->
<aura:component>
<aura:attribute name="childDisplayMonth" type="String" default="child"/>
<div class="slds-p-top--large">
<lightning:layout multipleRows="false">
<lightning:layoutItem size="4" padding="around-small">
displayMonth in child: {!v.childDisplayMonth}
</lightning:layoutItem>
<lightning:layoutItem size="4" padding="around-small">
<lightning:button label="childApply" onclick="{!c.applyHandle}" disabled="false" />
</lightning:layoutItem>
</lightning:layout>
</div>
</aura:component>
childAura.css
.THIS {
background-color: LightSkyBlue;
}
childController.js
({
applyHandle : function(component, event, helper) {
component.set('v.childDisplayMonth', 'Last 36 Months');
}
})
3. 结果分析
加载后如下图所示:
分析:
- 初始化parentAura组件时,从controller.cls中获取displayMonths值列表["Last 6 Months", "Last 12 Months", "Last 18 Months", "Last 36 Months"],默认加载第一个值,所以下拉框中为Last 6 Months.
- read属性的默认值设为false,所以三元表达式中选择else项,打印:you cannot read it.
- displayMonth的默认值设置为Last 6 Months, 打印:displayMonth in parent: Last 6 Months.
- 在parentAura组件中初始化childAura组件时,传递childDisplayMonth值等于displayMonth,所以该属性值为Last 6 Months,而不使用默认值child,打印displayMonth in child: Last 6 Months.
更换下拉框值,并点击parentApply按钮:
分析:
- 下拉框选择Last 12 Months,点击parentApply按钮时,调用parentAuraController.js中applyHandle函数。该函数中,将selectedDisplayMonth赋值给displayMonth,打印:displayMonth in parent: Last 12 Months;将read属性重新赋值为true,所以三元表达式中选择if项,打印:you can read it.
- 在parentAura组件中实例化childAura组件时,赋值childDisplayMonth采用的是绑定的方式{!**},所以修改parentAura组件中displayMonth属性值时,同步修改childAura组件中childDisplayMonth值。(自己可以尝试非绑定方式,查看结果如何)
点击childParent按钮:
分析:
- 点击childApply按钮,触发childAura组件childAuraController.js的applyHandle函数,该函数重新赋值属性childDisplayMonth等于Last 36 Months,打印:displayMonth in child: Last Months
- 在parentAura组件中实例化childAura组件时,赋值childDisplayMonth采用的是绑定的方式{!**},所以修改childAura组件中childDisplayMonth属性值时,同步修改parentAura组件中displayMonth值。(自己可以尝试非绑定方式,查看结果如何)
作者:吴家二少
博客地址:https://www.cnblogs.com/cloudman-open/
本文欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接
Salesforce学习之路(十三)Aura案例实战分析的更多相关文章
- Salesforce学习之路-developer篇(五)一文读懂Aura原理及实战案例分析
1. 什么是Lightning Component框架? Lightning Component框架是一个UI框架,用于为移动和台式设备开发Web应用程序.这是一个单页面Web应用框架,用于为Ligh ...
- Salesforce学习之路-developer篇(五)Aura组件原理及常用属性
很喜欢曾经看到的一句话:以输出倒逼输入.以输出的形式强制自己学习,确实是高效的学习方式,真的很棒.以下仅为个人学习理解,如有错误,欢迎指出,共同学习. 1. 什么是Lightning Componen ...
- Salesforce学习之路(十)Aura组件工作原理
很喜欢曾经看到的一句话:以输出倒逼输入.以输出的形式强制自己学习,确实是高效的学习方式,真的很棒.以下仅为个人学习理解,如有错误,欢迎指出,共同学习. 1. 什么是Lightning Componen ...
- Salesforce学习之路-developer篇(三)利用Visualforce Page实现页面的动态刷新案例学习
Visualforce是一个Web开发框架,允许开发人员构建可以在Lightning平台上本地托管的自定义用户界面.其框架包含:前端的界面设计,使用的类似于HTML的标记语言:以及后端的控制器,使用类 ...
- Salesforce学习之路(十一)Aura组件属性<aura:attribute />
1. <aura:attribute />语法 Aura组件属性类似与Apex中类的成员变量(或者说Java中类的成员变量).他们是组件在特定的实例上设置的类型化字段,可以使用表达式语法从 ...
- Salesforce学习之路(十二)Aura组件表达式
1. 表达式语法 在上篇文章组件属性示例中,新建了一个属性whom, 引用该属性时使用了表达式:{!v.whom},负责该属性的动态输出. 语法:{!expression} 上述示例中,我们的属性名称 ...
- Salesforce学习之路-admin篇
Salesforce是一款非常强大的CRM(Customer Relationship Management)系统,国外企业使用十分频繁,而国内目前仅有几家在使用(当然,国内外企使用的依旧较多),因此 ...
- Salesforce学习之路(十)Org的命名空间
1. 命名空间的适用场景 每个组件都是命名空间的一部分,如果Org中设置了命名空间前缀,那么需使用该命名空间访问组件.否则,使用默认命名空间访问组件,系统默认的命名空间为“c”. 如果Org没有创建命 ...
- Salesforce学习之路(九)Org的命名空间
1. 命名空间的适用场景 每个组件都是命名空间的一部分,如果Org中设置了命名空间前缀,那么需使用该命名空间访问组件.否则,使用默认命名空间访问组件,系统默认的命名空间为"c". ...
随机推荐
- win server 2008R2 安装telnet 在VM虚拟机中
服务器端: 第一步: 安装telnet 先固定,ip地址,因为虚拟机之间通信需要同网段,所以先固定ip, 第二步: 服务管理器>功能>添加功能 >服务器上安装服务器端telnet ...
- moloch1.8.0简单操作手册
moloch1.8.0简单操作手册 Sessions 页面:Sessions主要通过非常简单的查询语言来构建表达式追溯数据流量,以便分析. SPIView 页面: SPIGraph页面:SPIGrap ...
- Python3+RobotFramework+pycharm环境搭建
我的环境为 python3.6.5+pycharm 2019.1.3+robotframework3.1.2 1.安装python3.x 略 之后在cmd下执行:pip install robot ...
- 面试必问的Synchronized知道这些就可以了
Synchronized关键字算是Java的元老级锁了,一开始它撑起了Java的同步任务,其用法简单粗暴容易上手.但是有些与它相关的知识点还是需要我们开发者去深入掌握的.比如,我们都知道通过Synch ...
- Python 调用图灵机器人 API
''' Python3''' import requests #导入requests库 import json #导入json库 key = '3119f1e3610f42c5977ea73c4097 ...
- git jenkins 基本部署
git jenkins 本地仓库基础 1.安装git [root@gitlab ~]# yum install git -y 2.配置git [root@gitlab ~]# git config ...
- Leetcode(8)字符串转换整数
Leetcode(8)字符串转换整数 [题目表述]: 请你来实现一个 atoi 函数,使其能将字符串转换成整数. 首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止. 当我 ...
- 如何在 GitHub 的项目中创建一个分支呢?
如何在 GitHub 的项目中创建一个分支呢? 其实很简单啦,直接点击 Branch,然后在弹出的文本框中添加自己的 Branch Name 然后点击蓝色的Create branch就可以了,这样一来 ...
- 远程桌面连接(mstsc)
目录 1. 序言 2. 准备工作 3. 内网远程连接(以mstsc的方式) 4. 问题---凭据不工作 5. 外网远程连接(mstsc) 6. 结语 更新时间:2019.09.10 1. 序言 有时候 ...
- Redis备忘(一)
hash: 渐进式rehash:同时查询新旧两个hash,然后在后续定时任务以及hash的子指令中,循序渐进将旧的迁移到新的hash表 Redis应用: 1.分布式锁: 实现1:setnx+expir ...