Lightning Application Event 实例：TODO 列表

Application Event

在 Lightning 框架中有两种事件：

• Component Event：组件事件
• Application Event：应用事件

Application Event 是一个典型的“观察者模式”的实现，它从某一个组件中发出，然后所有定义了其 handler 的组件都会被触发相应的函数。

在本文中我们以一个 TODO 列表的实例来阐述 Application Event 是如何工作的。

效果如下图：

实例功能

在实例中，我们可以让用户添加、修改、删除各种 TODO 项目，然后点击“保存”按钮进行保存。

假设在 Salesforce 中已经建立了 TODO 项目的数据模型，其中包括一个“内容”的字段。

实例结构

在实例中主要包括：

一个应用：

• AppEventExample_App：应用的入口

两个组件：

• AppEventExample_Main：主组件，包含了添加、保存按钮，以及各种 TODO 子组件
• AppEventExample_Input：TODO 子组件，用于输入或删除一个 TODO 项目

三个事件：

• AppEventExample_DeleteInput：用于删除某个 TODO 项目
• AppEventExample_GetInputs：用于从主组件中发送信号，让子组件开始发送其中的内容给主组件
• AppEventExample_SendInputs：用于从自组件中发送其内容

主要包括了三个功能：

添加一个 TODO 项目

在主组件中定义一个 “Aura.Component[]” 类型的属性，然后每次当用户点击“添加”按钮时，动态建立一个新的 TODO 子组件，添加到这个属性中，并显示在主组件中

删除一个 TODO 项目

所有的 TODO 项目都是由子组件来展示的。当需要删除一个子组件时，我们使用 AppEventExample_DeleteInput 事件来传递子组件的 id 值，然后在主组件中将相应的子组件删除掉

保存所有的 TODO 项目

这个功能是将所有 TODO 子组件中的内容都发送到主组件中，然后一起保存到后端。

它使用了两个事件。

首先，当用户点击“保存”按钮时，AppEventExample_GetInputs 事件被触发。这个事件不包含任何的参数，只是告诉各个子组件“现在要保存数据了，将你们的内容发送给我”。

当子组件收到这个信号之后，AppEventExample_SendInputs 事件被分别出发，每个子组件中的内容都被发送出来，由主组件进行接收并处理。

源代码

AppEventExample_DeleteInput

<aura:event type="APPLICATION">
    <aura:attribute name="id" type="Integer" access="public" />
</aura:event>

在每个 TODO 组件中都有一个 id 属性，可以在删除某一行的时候指明这一行的 id 值。

AppEventExample_GetInputs

<aura:event type="APPLICATION" />

AppEventExample_SendInputs

<aura:event type="APPLICATION">
    <aura:attribute name="content" type="String" access="public" />
</aura:event>

AppEventExample_Input

<aura:component >
    <aura:attribute name="content" type="String" access="public" />
    <aura:attribute name="id" type="Integer" access="public" />
    
    <aura:registerEvent name="deleteInput" type="c:AppEventExample_DeleteInput" />
    <aura:registerEvent name="AppEventExample_SendInputs" type="c:AppEventExample_SendInputs" />

    <aura:handler event="c:AppEventExample_GetInputs" action="{!c.sendInput}" />
    
    <tr>
        <td>
            <lightning:input label="" name="contentInput" value="{!v.content}" />
        </td>
        
        <td>
        	<lightning:button label="删除" onclick="{! c.deleteThis }" />
        </td>
    </tr>
</aura:component>

({
    // 启用事件，发送 id 值，让主组件删除相应的子组件
	deleteThis : function(component, event, helper) { 
		var appEvent = $A.get("e.c:AppEventExample_DeleteInput");
        appEvent.setParams({
            "id" : component.get('v.id')
        });
        appEvent.fire();
	},
    
    // 启用事件，将其中的内容发送出去
    sendInput :  function(component, event, helper) { 
		var appEvent = $A.get("e.c:AppEventExample_SendInputs");
        appEvent.setParams({
            "content" : component.get('v.content')
        });
        appEvent.fire();
	},
})

AppEventExample_Main

<aura:component >
    <aura:attribute name="inputs" type="Aura.Component[]" access="public" />
    <aura:attribute name="nextId" type="Integer" access="public" default="1" />
    <aura:attribute name="contentList" type="String[]" access="public" />
    
    <aura:registerEvent name="AppEventExample_GetInputs" type="c:AppEventExample_GetInputs" />

    <aura:handler event="c:AppEventExample_DeleteInput" action="{!c.deleteInput}" />
    <aura:handler event="c:AppEventExample_SendInputs" action="{!c.receiveInput}" />
    
    <lightning:button label="添加" onclick="{! c.addOne }" />
    <lightning:button label="保存" onclick="{! c.save }" />
    
    <table class="slds-table">
        {!v.inputs}
    </table>
</aura:component>

({
    // 动态建立 TODO 项目的子组件
	addOne : function(component, event, helper) {
        var inputs = component.get('v.inputs');
        var nextId = component.get('v.nextId');
        
		$A.createComponent(
            "c:AppEventExample_Input",
            {
                "id": nextId,
                "content": ''
            },
            function(newComponent, status, errorMessage){
                if (status === "SUCCESS") {
                    inputs.push(newComponent);
                    component.set('v.inputs', inputs);
                    
                    component.set('v.nextId', nextId + 1);                     
                }
            }
        );
	},
    
    // 接收 TODO 的子组件发送的 id 值，然后从 inputs 列表中删除相应的子组件
    deleteInput : function(component, event, helper) {
        var inputs = component.get('v.inputs');
        var id = event.getParam('id');
        
        var indexToRemove = -1;

        for (var i = 0; i < inputs.length; i++) {
            if (inputs[i].get('v.id') == id) {
                indexToRemove = i;
                break;
            }
        }

        inputs.splice(i, 1);

        component.set('v.inputs', inputs);
    },
    
    // 启用事件，然后收到子组件发送的内容，最后保存到后端
    save : function(component, event, helper) {
        var appEvent = $A.get("e.c:AppEventExample_GetInputs");
        
        appEvent.fire();
        
        // 为了演示方便，直接显示收到的所有内容
        var contentList = component.get('v.contentList');
        alert(contentList);
    },
    
    // 接收子组件发送的内容
    receiveInput : function(component, event, helper) {
        var content = event.getParam("content");
        
        var contentList = component.get('v.contentList');
        contentList.push(content);
        component.set('v.contentList', contentList);
    }
})

AppEventExample_App

<aura:application extends="force:slds">
    <c:AppEventExample_Main />
</aura:application>