アプリケーションイベント

ライトニングフレーム内の2つのイベントがあります。

コンポーネントイベント：コンポーネントイベント
アプリケーションイベント：アプリケーションイベント

アプリケーションイベントは、その成分の一つから出射される典型的な「観察モード」を達成し、すべてのその構成要素の定義の関数対応するハンドラをトリガします。

この記事の我々のインスタンスでTODOリストアプリケーションイベントは、それがどのように動作するかを説明するためのものです。

示すように、結果：

レンダリング

機能の例

例では、ユーザーは、追加、変更、様々なTODO項目を削除し、保存するために「保存」ボタンをクリックすることができます。

Salesforceのデータモデルを仮定すると「コンテンツ」フィールドを含むTODO項目を、確立されました。

構造の例

例では、次のとおりです。

アプリケーション：

AppEventExample_App：エントランスアプリケーション

二つの成分：

AppEventExample_Main：本体、追加を含み、保存ボタン、および様々なサブアセンブリTODO
AppEventExample_Input：侵入やTODO項目を削除するためのTODOのサブアセンブリ

3つのイベント：

AppEventExample_DeleteInput：TODO項目を削除するために使用
AppEventExample_GetInputs：メインアセンブリから信号を送信するため、サブアセンブリ開始が本体にコンテンツを送信するように
AppEventExample_SendInputs：自己組織化からのコンテンツを伝送するための

三つの機能を含めます：

TODO項目を追加します。

「Aura.Componentは[]」タイプのプロパティを定義するとき、その都度ユーザーが動的にサブアセンブリ新しいTODOを構築し、本体に「追加」ボタンをクリックすると、この属性は、に加えて、本体に表示されています

TODO項目を削除するには

すべてのTODO項目は、サブアセンブリを表示するために作られています。あなたがサブコンポーネントを削除する必要があるとき、私たちは、対応するサブアセンブリの本体で削除された、id値のサブコンポーネントを渡すためにAppEventExample_DeleteInputイベントを使用します

すべてのTODO項目を保存

この機能は、すべてのTODOサブアセンブリの内容は、本体内に送信され、後端部に保存されています。

これは、2つのイベントを使用しています。

まず、「保存」ボタンをユーザーがクリックすると、AppEventExample_GetInputsイベントがトリガされたとき。このイベントは、単に各サブコンポーネントを教えて、任意のパラメータが含まれていない「今のデータを保存したい、と私にはあなたのコンテンツを送信します。」

この信号の受信サブアセンブリ後、AppEventExample_SendInputsそれぞれイベントを開始し、各サブアセンブリの内容が送出され、本体のプロセスによって受信されました。

ソース

AppEventExample_DeleteInput

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

id属性を持っている、あなたは、各時間TODOコンポーネント内の行の削除には、この行の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>

ライトニングアプリケーションイベントの例：TODOリスト