Lightning框架示例 - 动态建立Lightning组件
动态建立Lightning组件
组件化前端开发是Lightning框架的优点之一。在进行Lightning应用开发时，我们可以将组件进行嵌套、引用，从而实现模块的封装和重用，提高开发效率。
组件的嵌套和引用最常用的方法是在Lightning组件中直接使用组件标签，比如：
<aura:component controller="ExampleController">
<c:ExampleChildComponent />
</aura:component>
在这段代码中，正在进行开发的Lightning组件中静态地引用了“ExampleChildComponent”组件。
另一种方法就是在控制器或辅助函数的Javascript代码中动态建立组件，主要使用“$A.createComponent()”函数（官方文档）。
本文将通过一个实例来阐述如何动态建立组件。
示例目标
本示例的目标是实现一个类似于Salesforce标准列表视图的应用，可以显示一个电话为“1234567890”的“客户”对象的列表，并可以更改它们的名字。
示例将包含以下几个部分：
- Lightning应用
- 列表组件，用于显示“客户”对象的列表
- 更新组件，在运行时动态建立，包括一个文本框和提交按钮，接收用户的输入并将输入的值更新到“客户”对象的“名字”字段中
- Lightning事件，用于在组件中传递数据
建立Lightning组件的Apex控制器
建立一个Apex类，取名为“AccountListViewController”，作为即将建立的Lightning组件的控制器。在这个Apex类中我们将编写“客户”对象相关的函数，包括了查找“客户”对象和更新“客户”对象。
为了演示简单起见，我们略去异常处理以及单元测试等代码。
代码如下：
public class AccountListViewController {
@AuraEnabled
public static String loadAccounts() {
List<Account> 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和名字两个属性。
代码如下：
<aura:event type="COMPONENT">
<aura:attribute name="accountId" type="String" />
<aura:attribute name="accountName" type="String" />
</aura:event>
建立更新组件
建立一个新的Lightning组件，命名为“AccountNameUpdateCmp”，用于接收用户的输入，其中包含：
- 两个属性：“客户”的ID和名字
- 输入框，用于让用户输入“客户”名字
- 提交按钮，用于调用更新的函数
- 事件注册，用于调用刚才建立的更新事件，传递数据
组件外观代码如下：
<aura:component >
<aura:attribute name="accountId" type="String" access="public" />
<aura:attribute name="accountName" type="String" access="public" />
<aura:registerEvent name="accountListViewEvt" type="c:accountListViewEvt" />
<div class="slds-form slds-form_horizontal">
<div class="slds-form-element">
<label class="slds-form-element__label">名字</label>
<div class="slds-form-element__control">
<lightning:input value="{!v.accountName}" />
</div>
</div>
<div class="slds-form-element">
<div class="slds-form-element__control">
<lightning:button variant="brand" label="Submit" onclick="{!c.submit}" />
</div>
</div>
</div>
</aura:component>
组件控制器代码如下：
({
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控制器更新“客户”对象的名字
组件外观的代码如下：
<aura:component controller="AccountListViewController">
<!-- 将需要动态建立的组件作为依赖注册在此 -->
<aura:dependency resource="c:AccountNameUpdateCmp" />
<!-- Aura.Component[] 类型的属性用于保存动态建立的组件 -->
<aura:attribute name="updateWidget" type="Aura.Component[]" access="public" />
<aura:attribute name="accountList" type="Object[]" access="public" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<!-- 在更新事件启动之后，接收事件传递的值，并更新“客户”对象 -->
<aura:handler name="accountListViewEvt" event="c:accountListViewEvt" action="{!c.handleUpdate}"/>
<!-- 这个部分默认是隐藏的，其中包括了变量“updateWidget”，所以更新组件建立后将被显示在此 -->
<div>
<section role="dialog" tabindex="-1" aria-modal="true" class="slds-modal" aura:id="modalBody">
<div class="slds-modal__container">
<div class="slds-modal__content slds-p-around_medium">
{!v.updateWidget}
</div>
</div>
</section>
<div class="slds-backdrop" aura:id="modalBackdrop"></div>
</div>
<!-- 列表的外观，用于显示“客户”对象 -->
<table class="slds-table slds-table_bordered">
<thead>
<tr class="slds-text-title">
<th scope="col">
<div class="slds-truncate" title="客户名">客户名</div>
</th>
<th scope="col">
<div class="slds-truncate" title="电话">电话</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.accountList}" var="acc">
<tr>
<td>
<div class="slds-truncate">
<a class="slds-th__action" href="javascript:void(0);" role="button"
onclick="{!c.startUpdate}" data-account-id="{!acc.Id}" data-account-name="{!acc.Name}">
{!acc.Name}
</a>
</div>
</td>
<td>
<div class="slds-truncate">
{!acc.Phone}
</div>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</aura:component>
组件的控制器代码如下：
({
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”，包含了刚才的列表组件。代码如下：
<aura:application extends="force:slds">
<c:AccountListViewCmp />
</aura:application>
小结
动态建立组件可以实现组件的灵活复用。
比如上面示例中的更新组件，我们可以再增加几个属性，扩展为通用的文本更新组件。它没有相关联的Apex控制器，没有很多逻辑，只负责接收和发送文本框中的数据（相关的逻辑由调用此组件的代码来处理）。
当然，动态建立的组件本身也可以包括Apex控制器和相关的逻辑，但是这样会增加和服务器端的通讯次数。为了保证运行效率，我们最好让它们只负责客户端的操作。
Salesforce对于动态建立的组件有垃圾回收机制，这只限于组件被创建后赋值给了“Aura.Component[]”类型的属性。当此组件不再被使用时，会被自动清除。
对于更新“客户”对象的“名字”功能，上面的示例有些过度设计了。但是在实际应用中，可以对和该示例类似的结构进行扩展，用于更复杂的场景，比如对于外部数据的CRUD操作（CRUD操作需要通过网络服务使用，Salesforce的默认功能可能无法使用）。
