动态建立Lightning组件
组件化前端开发是Lightning框架的优点之一。在进行Lightning应用开发时,我们可以将组件进行嵌套、引用,从而实现模块的封装和重用,提高开发效率。
组件的嵌套和引用最常用的方法是在Lightning组件中直接使用组件标签,比如:
在这段代码中,正在进行开发的Lightning组件中静态地引用了“ExampleChildComponent”组件。
另一种方法就是在控制器或辅助函数的Javascript代码中动态建立组件,主要使用“$A.createComponent()”函数(官方文档)。
本文将通过一个实例来阐述如何动态建立组件。
示例目标
本示例的目标是实现一个类似于Salesforce标准列表视图的应用,可以显示一个电话为“1234567890”的“客户”对象的列表,并可以更改它们的名字。
示例将包含以下几个部分:
- Lightning应用
- 列表组件,用于显示“客户”对象的列表
- 更新组件,在运行时动态建立,包括一个文本框和提交按钮,接收用户的输入并将输入的值更新到“客户”对象的“名字”字段中
- Lightning事件,用于在组件中传递数据
建立Lightning组件的Apex控制器
建立一个Apex类,取名为“AccountListViewController”,作为即将建立的Lightning组件的控制器。在这个Apex类中我们将编写“客户”对象相关的函数,包括了查找“客户”对象和更新“客户”对象。
为了演示简单起见,我们略去异常处理以及单元测试等代码。
代码如下:
public class AccountListViewController {
@AuraEnabled
public static String loadAccounts() {
List accountList = [SELECT Id, Name, AccountNumber, Phone, Website FROM Account WHERE Phone = '1234567890'];
return JSON.serialize(accountList);
}
@AuraEnabled
public static String updateAccount(String jsonString) {
Account acc = (Account)JSON.deserialize(jsonString, Account.class);
update acc;
return 'Success';
}
}
建立更新事件
为了在两个组件中传递数据(列表组件、更新组件),需要建立一个Lightning事件,取名为“accountListViewEvt”,其中包含了“客户”对象的ID和名字两个属性。
代码如下:
建立更新组件
建立一个新的Lightning组件,命名为“AccountNameUpdateCmp”,用于接收用户的输入,其中包含:
- 两个属性:“客户”的ID和名字
- 输入框,用于让用户输入“客户”名字
- 提交按钮,用于调用更新的函数
- 事件注册,用于调用刚才建立的更新事件,传递数据
组件外观代码如下:
组件控制器代码如下:
({
submit : function(component, event, helper) {
var cmpEvent = component.getEvent("accountListViewEvt");
cmpEvent.setParams({
'accountId': component.get('v.accountId'),
'accountName': component.get('v.accountName'),
});
cmpEvent.fire();
},
})
从上面可以看出:
- 此组件没有相关联的Apex控制器,只负责接收用户输入的值,作为“客户”对象的名字
- 当用户点击提交按钮后,在控制器中使用“component.getEvent()”函数启用更新事件,并用“fire()”函数将用户的输入发送出去。
接下来要建立的列表组件将动态创建此组件,并在此组件执行结束后接收用户的输入(通过更新事件发送的值)。
建立列表组件
建立一个Lightning组件,取名为“AccountListViewCmp”,并在其中建立:
- 一个列表类型的属性,用于存储要显示的“客户”对象
- 一个表格,用于显示“客户”对象的内容
- 一个初始化函数,用于读取“客户”对象
- 一个创建更新组件的函数,动态建立更新组件
- 一个事件处理函数,用于在更新组件提交后接收用户的输入,并通过Apex控制器更新“客户”对象的名字
组件外观的代码如下:
{!v.updateWidget}
客户名
电话
{!acc.Phone}
组件的控制器代码如下:
({
doInit : function(component, event, helper) {
helper.loadAccountList(component, helper);
},
startUpdate : function(component, event, helper) {
var accountId = event.currentTarget.dataset.accountId;
var accountName = event.currentTarget.dataset.accountName;
// 动态建立更新组件,并将“客户”的ID和当前的“名字”的值传递到更新组件中
$A.createComponent(
"c:AccountNameUpdateCmp",
{
"accountId": accountId,
"accountName": accountName
},
function(newComponent, status, errorMessage){
if (status === "SUCCESS") {
component.set('v.updateWidget', newComponent);
var modalBody = component.find('modalBody');
var modalBackdrop = component.find('modalBackdrop');
$A.util.addClass(modalBody,'slds-fade-in-open');
$A.util.addClass(modalBackdrop,'slds-backdrop--open');
}
}
);
},
handleUpdate : function(component, event, helper) {
// 在更新事件结束后,得到其中包含的值,即“客户”对象的ID和用户输入作为对象新名字的值
var updateInfo = {
Id: event.getParam('accountId'),
Name: event.getParam('accountName')
};
// 调用Apex控制器的代码进行更新
var action = component.get('c.updateAccount');
action.setParams({
jsonString: JSON.stringify(updateInfo)
});
action.setCallback(this, function(response) {
var result = response.getReturnValue();
if (result == 'Success') {
helper.loadAccountList(component, helper);
}
});
$A.enqueueAction(action);
var modalBody = component.find('modalBody');
var modalBackdrop = component.find('modalBackdrop');
$A.util.removeClass(modalBody,'slds-fade-in-open');
$A.util.removeClass(modalBackdrop,'slds-backdrop--open');
},
})
辅助函数代码如下:
({
loadAccountList : function(component, helper) {
var action = component.get('c.loadAccounts');
action.setCallback(this, function(response) {
var result = response.getReturnValue();
var accountList = JSON.parse(result);
component.set('v.accountList', accountList);
});
$A.enqueueAction(action);
},
})
建立Lightning应用
建立一个Lightning应用,取名为“AccountListViewApp”,包含了刚才的列表组件。代码如下:
小结
动态建立组件可以实现组件的灵活复用。
比如上面示例中的更新组件,我们可以再增加几个属性,扩展为通用的文本更新组件。它没有相关联的Apex控制器,没有很多逻辑,只负责接收和发送文本框中的数据(相关的逻辑由调用此组件的代码来处理)。
当然,动态建立的组件本身也可以包括Apex控制器和相关的逻辑,但是这样会增加和服务器端的通讯次数。为了保证运行效率,我们最好让它们只负责客户端的操作。
Salesforce对于动态建立的组件有垃圾回收机制,这只限于组件被创建后赋值给了“Aura.Component[]”类型的属性。当此组件不再被使用时,会被自动清除。
对于更新“客户”对象的“名字”功能,上面的示例有些过度设计了。但是在实际应用中,可以对和该示例类似的结构进行扩展,用于更复杂的场景,比如对于外部数据的CRUD操作(CRUD操作需要通过网络服务使用,Salesforce的默认功能可能无法使用)。