作者： ponybai

在最后一个单元中，我们介绍了Lightning Data Service如何处理CRUD。现在让我们来看看如何在记录更改时采取措施，以便您的组件可以响应记录加载，更改，更新或删除操作。

要在记录更改时采取措施，请处理recordUpdated事件。

<force:recordData aura:id="forceRecordDataCmp"
    recordId="{!v.recordId}" 
    layoutType="{!v.layout}"
    targetRecord="{!v.record}"
    targetFields="{!v.simpleRecord}"
    targetError="{!v.error}"
    recordUpdated="{!c.recordUpdated}" />

({
    recordUpdated: function(component, event, helper) {
        var eventParams = event.getParams();
        if(eventParams.changeType === "CHANGED") {
            // 获取为此记录更改的字段
            var changedFields = eventParams.changedFields;
            console.log('Fields that are changed: ' + JSON.stringify(changedFields));
            // 记录被改变，所以刷新组件（或其他组件逻辑）
            var resultsToast = $A.get("e.force:showToast");
            resultsToast.setParams({
                "title": "Saved",
                "message": "The record was updated."
            });
            resultsToast.fire();
        } else if(eventParams.changeType === "LOADED") {
            console.log("Record is loaded successfully.");
        } else if(eventParams.changeType === "REMOVED") {
            var resultsToast = $A.get("e.force:showToast");
            resultsToast.setParams({
                "title": "Deleted",
                "message": "The record was deleted."
            });
            resultsToast.fire();
        } else if(eventParams.changeType === "ERROR") {
            console.log('Error: ' + component.get("v.error"));
        }
    }
})

• LDS通过使用适当的changeType和changedFields值触发recordUpdated事件来通知所有其他的force的实例：recordData。
• 它将每个force：recordData上的targetRecord和targetFields属性设置为新的记录值。如果targetRecord或targetFields被任何UI引用，则会自动触发重新渲染，以便UI显示最新的数据。

如果加载时发生错误，则将targetError属性设置为本地化的错误消息。如果强制属性：recordData无效，或者服务器不可访问且记录不在本地缓存中，则会发生错误。从那里，你决定如何显示错误。

如果记录在服务器上无法访问，那么recordUpdated事件触发changeType = REMOVED，并且没有错误设置为targetError，因为记录变得不可访问有时是预期的结果。由于记录或实体共享和可见性设置，或记录被删除，记录也可能变得不可访问。

恭喜！现在您已经知道开始使用Lightning Data Service所需了解的一切。这是相对简单的，但它做了很多！在你脱颖而出并获得那个新奇的徽章之前，让我们把所有这些理论付诸实践。我们将放置一个页面，其中包含两个使用相同记录数据的组件，并正确响应记录更改。

该组件显示联系人的详细信息。请注意，它使用字段而不是layoutType，targetFields而不是targetRecord。请记住，可以包含fields或layoutType（或两者！），并且可以使用targetFields或targetRecord（或两者！）来检索记录数据。对于字段，您必须指定要查询的特定字段，而使用layoutType时，只需指定要使用的记录布局，即FULL或COMPACT。如果使用targetFields检索首选方法的数据，请在UI中使用v.targetFields.Name格式。如果您使用targetRecord，请使用v.targetRecord.fields.Name.value。

<aura:component implements="force:hasRecordId,flexipage:availableForRecordHome">

    <aura:attribute name="contactRecord" type="Object"/>
    <aura:attribute name="recordLoadError" type="String"/>
    
    <force:recordData aura:id="recordLoader"
        recordId="{!v.recordId}"
        fields="Name,Description,Phone,Industry"
        targetFields="{!v.contactRecord}"
        targetError="{!v.recordLoadError}"
    />

    <!-- 显示有关联系人详情的闪电卡 -->
    <div class="Contact Details"> 
        <lightning:card iconName="standard:contact" title="{!v.contactRecord.Name}" >
            <div class="slds-p-horizontal--small">
                <p class="slds-text-heading--small">
                    <lightning:formattedPhone title="Phone"  value="{!v.contactRecord.Phone}" /></p>
                <p class="slds-text-heading--small">
                    <lightning:formattedText title="Description" value="{!v.contactRecord.Description}" /></p>
                <p class="slds-text-heading--small">
                     <lightning:formattedText title="Industry" value="{!v.contactRecord.Industry}" /></p>
            </div>
        </lightning:card>
    </div>

</aura:component>

<aura:component implements="force:hasRecordId,flexipage:availableForRecordHome">

    <aura:attribute name="contactRecord" type="Object"/>
    <aura:attribute name="recordSaveError" type="String" default=""/>

    <!-- Load record in EDIT mode -->
    <force:recordData aura:id="recordLoader"
        recordId="{!v.recordId}"
        fields="Name,Description,Phone,Industry"
        targetFields="{!v.contactRecord}"
        targetError="{!v.recordSaveError}"
        mode="EDIT" 
        recordUpdated="{!c.handleRecordUpdated}" />

    <!-- Contact edit form -->
    <div class="Edit Contact">
        <lightning:card iconName="action:edit" title="Edit Contact">
            <div class="slds-p-horizontal--small">
                <lightning:input label="Contact Name" value="{!v.contactRecord.Name}"/>
                <lightning:input label="Contact Description" value="{!v.contactRecord.Description}"/>
                <lightning:input label="Contact Phone" value="{!v.contactRecord.Phone}"/>
                <br/>
                <lightning:button label="Save Contact" variant="brand" onclick="{!c.saveContact}" />
            </div>
        </lightning:card>
    </div>
    
    <!-- Display error message -->
    <aura:if isTrue="{!not(empty(v.recordSaveError))}">
        <div class="recordSaveError">
            {!v.recordSaveError}</div>
    </aura:if>

</aura:component>

({
    saveContact : function(cmp, event, helper) {
        var recordLoader = cmp.find("recordLoader");
        recordLoader.saveRecord($A.getCallback(function(saveResult) {
            if (saveResult.state === "ERROR") {
                var errMsg = "";
                // saveResult.error是一个错误数组，
                // 将所有错误收集到一个消息中
                for (var i = 0; i < saveResult.error.length; i++) {
                    errMsg += saveResult.error[i].message + "\n";
                }
                cmp.set("v.recordSaveError", errMsg);
            } else {
                cmp.set("v.recordSaveError", "");
            }
        }));
    },

    // 在更改记录时（通过任何组件），在这里控制组件行为
    handleRecordUpdated: function(component, event, helper) {
        var eventParams = event.getParams();
        if(eventParams.changeType === "CHANGED") {
            // 获取为此记录更改的字段
            var changedFields = eventParams.changedFields;
            console.log('Fields that are changed: ' + JSON.stringify(changedFields));
            // 记录被改变，所以刷新组件（或其他组件逻辑）
            var resultsToast = $A.get("e.force:showToast");
            resultsToast.setParams({
                "title": "Saved",
                "message": "The record was updated."
            });
            resultsToast.fire();
        } else if(eventParams.changeType === "LOADED") {
            // record is loaded in the cache
        } else if(eventParams.changeType === "REMOVED") {
            // record is deleted and removed from the cache
        } else if(eventParams.changeType === "ERROR") {
            console.log('Error: ' + component.get("v.error"));
        }
    }
})

在最后一个单元中，我们介绍了Lightning Data Service提供的漂亮的性能升级和生活质量功能。现在让我们学习如何使用它们。

请记住，force：recordData本身不包含任何UI元素。 force：recordData标签只是用来与服务器通信并管理本地缓存的逻辑。为了让用户查看和修改由LDS获取的数据，您必须包含UI元素。 force：recordData标记使用UI API向您的UI组件提供数据。

<aura:component implements="flexipage:availableForRecordHome, force:hasRecordId"> <!--inherit recordId attribute-->

<aura:attribute name="record" type="Object" 
  description="The record object to be displayed"/>
<aura:attribute name="simpleRecord" type="Object" 
  description="A simplified view record object to be displayed"/>
<aura:attribute name="recordError" type="String" 
  description="An error message bound to force:recordData"/>

<force:recordData aura:id="record"
    layoutType="FULL"
    recordId="{!v.recordId}"
    targetError="{!v.recordError}"
    targetRecord="{!v.record}"
    targetFields ="{!v.simpleRecord}"
    mode="VIEW"/>

<!-- 显示有关记录详情的闪电卡 -->
<div class="Record Details"> 
    <lightning:card iconName="standard:account" title="{!v.simpleRecord.Name}" >
        <div class="slds-p-horizontal--small">
            <p class="slds-text-heading--small">
                <lightning:formattedText title="Billing City" value="{!v.simpleRecord.BillingCity}" /></p>
            <p class="slds-text-heading--small">
                <lightning:formattedText title="Billing State" value="{!v.simpleRecord.BillingState}" /></p>
        </div>
    </lightning:card>
</div>

<!-- 显示闪电数据服务错误，如果有的话 -->
<aura:if isTrue="{!not(empty(v.recordError))}">
    <div class="recordError">
        {!v.recordError}</div>
</aura:if>

</aura:component>

<aura:component implements="flexipage:availableForRecordHome, force:hasRecordId"> <!--inherit recordId attribute-->

<aura:attribute name="record" type="Object" />
<aura:attribute name="simpleRecord" type="Object" />
<aura:attribute name="recordError" type="String" />

<force:recordData aura:id="recordEditor"
    layoutType="FULL"
    recordId="{!v.recordId}"
    targetError="{!v.recordError}"
    targetRecord="{!v.record}"
    targetFields ="{!v.simpleRecord}"
    mode="EDIT" />

    <!-- 显示有关记录详情的闪电卡 -->
    <div class="Record Details"> 
        <lightning:card iconName="standard:account" title="{!v.simpleRecord.Name}" >
            <div class="slds-p-horizontal--small">
                <p class="slds-text-heading--small">
                    <lightning:formattedText title="Billing State" value="{!v.simpleRecord.BillingState}" /></p>
                <p class="slds-text-heading--small">
                     <lightning:formattedText title="Billing City" value="{!v.simpleRecord.BillingCity}" /></p>
            </div>
        </lightning:card>
    </div>
    <br/>

    <!-- 显示编辑表格 -->
    <div class="Record Details">
        <lightning:card iconName="action:edit" title="Edit Account">
            <div class="slds-p-horizontal--small">
                <lightning:input label="Account Name" value="{!v.simpleRecord.Name}"/>
                <br/>
                <lightning:button label="Save Account" variant="brand" onclick="{!c.handleSaveRecord}" />
            </div>
        </lightning:card>
    </div>

    <!-- 显示闪电数据服务错误，如果有的话 -->
    <aura:if isTrue="{!not(empty(v.recordError))}">
        <div class="recordError">
            {!v.recordError}</div>
    </aura:if>
</aura:component>

({
    handleSaveRecord: function(component, event, helper) {
        component.find("recordEditor").saveRecord($A.getCallback(function(saveResult) {
            if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
                console.log("保存成功完成");
            } else if (saveResult.state === "INCOMPLETE") {
                console.log("用户离线，设备不支持草稿.");
            } else if (saveResult.state === "ERROR") {
                console.log('问题保存记录，错误：' + 
                           JSON.stringify(saveResult.error));
            } else {
                console.log('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
            }
        }));}
})

<aura:component implements="flexipage:availableForRecordHome, force:hasRecordId">

<aura:attribute name="newContact" type="Object"/>
<aura:attribute name="simpleNewContact" type="Object"/>
<aura:attribute name="newContactError" type="String"/>

<force:recordData aura:id="contactRecordCreator"
    layoutType="FULL"
    targetRecord="{!v.newContact}"
    targetFields ="{!v.simpleNewContact}"
    targetError="{!v.newContactError}"
    />

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <!-- 显示新的联系表格 -->
    <div class="Create Contact">
        <lightning:card iconName="action:new_contact" title="Create Contact">
            <div class="slds-p-horizontal--small">
                <lightning:input aura:id="contactField" label="First Name" value="{!v.simpleNewContact.FirstName}"/>
                <lightning:input aura:id="contactField" label="Last Name" value="{!v.simpleNewContact.LastName}"/>
                <lightning:input aura:id="contactField" label="Title" value="{!v.simpleNewContact.Title}"/>
                <br/>
                <lightning:button label="Save Contact" variant="brand" onclick="{!c.handleSaveContact}"/>
            </div>
        </lightning:card>
    </div>

    <!-- 显示闪电数据服务错误 -->
    <aura:if isTrue="{!not(empty(v.newContactError))}">
        <div class="recordError">
            {!v.recordError}</div>
    </aura:if>

</aura:component>

({
    doInit: function(component, event, helper) {
        // 从模板准备一个新的记录
        component.find("contactRecordCreator").getNewRecord(
            "Contact", // sObject type (entityAPIName)
            null,      // recordTypeId
            false,     // skip cache?
            $A.getCallback(function() {
                var rec = component.get("v.newContact");
                var error = component.get("v.newContactError");
                if(error || (rec === null)) {
                    console.log("错误初始化记录模板：" + error);
                }
                else {
                    console.log("Record template initialized: " + rec.sobjectType);
                }
            })
        );
    },

    handleSaveContact: function(component, event, helper) {
        if(helper.validateContactForm(component)) {
            component.set("v.simpleNewContact.AccountId", component.get("v.recordId"));
            component.find("contactRecordCreator").saveRecord(function(saveResult) {
                if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
                    // 记录已成功保存
                    var resultsToast = $A.get("e.force:showToast");
                    resultsToast.setParams({
                        "title": "Saved",
                        "message": "The record was saved."
                    });
                    resultsToast.fire();

                } else if (saveResult.state === "INCOMPLETE") {
                    // 处理不完整的状态
                    console.log("用户离线，设备不支持草稿");
                } else if (saveResult.state === "ERROR") {
                    // 处理错误状态
                    console.log('问题保存联系，错误： ' + 
                                 JSON.stringify(saveResult.error));
                } else {
                    console.log('未知问题，状态：' + saveResult.state +
                                ', error: ' + JSON.stringify(saveResult.error));
                }
            });
        }
    }
})

({
    validateContactForm: function(component) {
        var validContact = true;

         // 如果必填字段为空，则显示错误消息
        var allValid = component.find('contactField').reduce(function (validFields, inputCmp) {
            inputCmp.showHelpMessageIfInvalid();
            return validFields && inputCmp.get('v.validity').valid;
        }, true);

        if (allValid) {
            // 验证我们有一个帐户附加到
            var account = component.get("v.newContact");
            if($A.util.isEmpty(account)) {
                validContact = false;
                console.log("Quick action context doesn't have a valid account.");
            }
        	return(validContact);
            
        }  
	}
       
})

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">

<aura:attribute name="recordError" type="String" access="private"/>

<force:recordData aura:id="recordHandler"
    recordId="{!v.recordId}"
    fields="Id"
    targetError="{!v.recordError}"
    />

    <!-- 显示删除记录表格 -->
    <div class="Delete Record">
        <lightning:card iconName="action:delete" title="Delete Record">
            <div class="slds-p-horizontal--small">
                <lightning:button label="Delete Record" variant="destructive" onclick="{!c.handleDeleteRecord}"/>
            </div>
        </lightning:card>
    </div>

    <!-- 显示闪电数据服务错误，如果有的话 -->
    <aura:if isTrue="{!not(empty(v.recordError))}">
        <div class="recordError">
            {!v.recordError}</div>
    </aura:if>

</aura:component>

({
    handleDeleteRecord: function(component, event, helper) {
    component.find("recordHandler").deleteRecord($A.getCallback(function(deleteResult) {
        if (deleteResult.state === "SUCCESS" || deleteResult.state === "DRAFT") {
            console.log("Record is deleted.");
            var resultsToast = $A.get("e.force:showToast");
            resultsToast.setParams({
                "title": "Deleted",
                "message": "The record was deleted."
            });
            resultsToast.fire();
        }
        else if (deleteResult.state === "INCOMPLETE") {
            console.log("用户离线，设备不支持草稿");
        }
        else if (deleteResult.state === "ERROR") {
            console.log('问题删除记录，错误：' +
                        JSON.stringify(deleteResult.error));
        }
        else {
            console.log('未知问题，状态：' + deleteResult.state +
                        ', error: ' + JSON.stringify(deleteResult.error));
        }
    }));
}})

假设情况下的时间！因此，您使用的是Salesforce应用程序，由于连接问题，保存尝试无法到达服务器。也许你所乘坐的火车进入了一个隧道，你不小心在建筑物的那个角落里漫不经心地走过，或者那个小房间再次和细胞塔混乱了。无论如何，别担心，LDS会回来的。在发生连接问题时，Lightning Data Service会将您的更改存储在本地缓存中。这由SaveRecordResult对象中的DRAFT状态指示。记录的DRAFT状态在连接恢复时解决。通过LDS保存记录时，本地缓存不会更新，直到保存完成。在服务器上成功完成保存时，缓存将更新为服务器中记录的最新版本，并通知所有引用该记录的组件。保存后，您不必担心手动将记录重新加载到缓存中。 LDS为您处理所有的工作。

所有CRUD操作都尝试立即使用XMLHttpRequest解析到服务器。如果您的设备失去与服务器的连接，则Lightning Data Service可以从本地缓存中获取数据。 LDS是否从本地缓存或服务器提取数据取决于记录的年份，或者是否存在本地草案。如果记录足够新，或者存在本地草稿，则LDS将使用本地缓存。 LDS仅在需要时刷新记录，这意味着所有刷新都由组件触发。

好消息！您可以在免费的Trailhead Playground（TP）组织中练习使用LDS。什么是TP？这是一个为您定制的Salesforce开发版组织，可用于Trailhead。您可以启动一个TP，或创建一个新的TP，从任何动手挑战。现在就创建一个新的TP（使用现有的组织可能在检查挑战时产生问题）。滚动到此页面的底部。单击“启动”旁边的向下箭头，然后选择创建Trailhead Playground（需要登录）。如果您需要新TP的登录凭据，请按照本文中的说明进行操作。

我们建立了Lightning Data Service（LDS）作为Lightning的数据层。 LDS是Visualforce标准控制器的Lightning Components对应部件，可以访问页面上显示的数据。没有LDS，即使应用程序中的所有组件都从相同的记录数据中提取，应用程序中的每个组件都会独立调用服务器来对记录执行CRUD操作。每个服务器调用都会降低性能，使用户不必处理数据，而是用拇指旋转。这些独立的服务器调用也可能导致不一致，从而导致服务器调用刷新一个组件，使其他组件过期的情况。

闪电数据服务识别并消除涉及相同记录数据的请求，发送单个共享数据请求以更新所有相关组件。这不仅消除了组件间不一致的数据，而且还提供了一种方法来缓存数据以便在用户断开连接的情况下脱机工作，并在连接恢复后智能地同步数据。

这个gif显示了一个使用Lightning Data Service来编辑和更新组件的属性管理应用程序。状态更新后，销售状态进度栏会自动更新属性的详细信息。

这个gif显示了同一个页面中的第二个组件，它创建和显示父记录的约会。

如果您有Lightning应用程序创建，读取，更新或删除记录，则LDS是执行CRUD操作的最佳，最有效的方法。

LDS在这里简化你的生活。采用LDS意味着您不再需要编写自己的控制器代码。所有的数据访问代码都包含在LDS组件中，大大降低了应用程序和页面的复杂性。这种复杂性降低意味着您不必在性能和质量测试上花费太多时间。想想你可以节省的周期！

那么你如何获得闪电数据服务的好处呢？简单！你所要做的就是在你的组件中包含force：recordData。好的，除此之外还有一点点，所以让我们来看一个基本的用例。

LDS最简单的用途之一是加载记录。要在客户端加载记录，必须将force：recordData标记添加到组件，并设置recordId，mode和layoutType或fields属性。

• recordId 指定要加载的记录。记录不能没有recordId加载。
• 模式可以设置为编辑或视图，这决定了通知的行为以及可以使用记录执行哪些操作。如果您使用force：recordData以任何方式更改记录，请将模式设置为EDIT。
• layoutType 指定用于显示记录的布局（FULL或COMPACT）。
• fields 指定要查询的记录中的哪些字段。必须提供字段或layoutType属性（或两者）

force：recordData标签还支持一组target *属性，这些属性是force：recordData填充自身。目标*属性可以用来允许从UI进行访问。

• targetRecord 被装载的记录填充
• targetFields 填充了加载记录的简化视图
• targetError被填充任何错误

<force:recordData aura:id="forceRecordCmp" 
  <!-- aura:id is required to reference the component in your Javascript controller -->
    recordId="{!v.recordId}"
    layoutType="{!v.layout}"
    fields="{!v.fieldsToQuery}"
    mode="VIEW"
    targetRecord="{!v.record}"
    targetFields="{!v.simpleRecord}" 
    targetError="{!v.error}"
/>

<aura:component>

    <aura:attribute name="recordId" type="String" />
    <aura:attribute name="record" type="Object" />
    <aura:attribute name="simpleRecord" type="Object" />

     <force:recordData recordId="{!v.recordId}"
          targetRecord ="{!v.record}"
          targetFields ="{!v.simpleRecord}"
          fields="Id, Name"/>

    <div class="recordName">
        <p class="slds-text-heading--medium">
            <lightning:formattedtext title="Record Name" value="{!v.simpleRecord.Name}"></p>
    </div>

</aura:component>

• saveRecord（）插入或更新加载到force：recordData组件的记录。
• deleteRecord（）删除加载的记录。
• getNewRecord（）加载保存时执行插入的新记录模板。
• reloadRecord（）重载加载代码，用当前的属性值覆盖当前的targetRecord。

我们将在下一个单元详细介绍如何使用这些Aura方法。

闪电数据服务目前不支持每种实体类型。有关受支持实体的列表，请参阅闪电数据服务：注意事项。

在Summer ’17发布之前，Lightning Data Service使用了force：recordPreview组件。 force：recordPreview组件已被弃用，并完全由force：recordData替换。如果使用force：recordPreview，则重构组件以使用force：recordData。组件之间的主要区别在于：force：recordData使用UI API以新形状返回记录，并包含一个新属性targetFields。从force更新的简单方法：recordPreview强制：recordData是将targetRecords的引用更改为targetFields。这意味着v.targetFields.Name相当于v.targetRecord.fields.Name.value。简单！

在本单元中，我们将解决我们的小开支应用程序中最后一个未完成的功能：报销？复选框。你可能认为实现一个复选框将是一个简短的话题。我们当然可以采取一些捷径，并将其作为一个很短的话题。

但是除了使复选框工作之外，这个单元还有关于删除我们已经采取的所有快捷方式。我们要花这个单位“正确地做”，其中有几个地方意味着我们之前做过的重构工作。

在开始之前，我们先来谈谈我们采取的捷径，正确的道路，为什么正确的道路（有点）更难，但也更好。

如果您以源代码的形式看看我们的小费用应用程序，并列出单独的代码工件，您将得到如下内容。

• expenses component
  • expenses.cmp
  • expensesController.js
  • expensesHelper.js
• expensesList component
  • expensesList.cmp
• expenseItem component
  • expenseItem.cmp
• ExpensesController (server-side)
  • ExpensesController.apex

以下是所有内容如何组合在一起的情况，以及稍后您接线的createExpense和updateExpense事件。

但是，如果你看屏幕上的应用程序，你看到了什么？你应该看到什么，你看到的最终会看到什么，是应用程序分解成更多的组件。您会看到，您可以将我们的应用程序进一步分解为更小的碎片，比迄今为止所做的更多。至少，我们希望您看到“添加费用”表单实际上应该是它自己的独立组件。 （这就是为什么我们在用户界面上画一个盒子的原因！）

为什么我们不把这个表格作为一个单独的组件？不这样做是迄今为止我们在这个模块的过程中最大的捷径。在软件设计方面，这比我们称之为“恶心”的黑客更糟。构建Lightning组件应用程序的正确方法是创建独立的组件，然后将它们组合在一起以构建新的更高级别的功能。为什么我们不采取这种方法？

我们采取了快捷方式，因为它将主要费用数组组件属性和影响它的控制器代码保存在同一个组件中，所以我们在“主费用”组件中保留了“添加费用”表单。我们希望createExpense（）辅助函数能够直接触碰费用数组。如果我们将“添加费用”表单移到单独的组件中，那是不可能的。

为什么不？我们很早就介绍了这个原因，但是现在我们想要真正的琢磨一下。闪电组件应该是独立的。它们是封装所有基本功能的独立元素。一个组件不允许触及另一个组件，甚至是一个子组件，并且改变它的内部组件。

有两种主要的方式与另一个组件进行交互或影响其他组件。第一种方法就是我们已经看到并做了相当多的工作：在组件的标签上设置属性。组件的公共属性构成了其API的一部分。

与组件交互的第二种方式是通过事件。与属性一样，组件声明它们发出的事件以及它们可以处理的事件。和属性一样，这些公共事件构成了组件的公共API的一部分。我们实际上已经使用和处理了事件，但事件隐藏在一些便利功能之后。在这个单元中，我们将把事件拖入光明中，并创建一些我们自己的事物。

这两种机制（属性和事件）是API“套接字”，即将组件连接在一起形成完整电路的方式。事件也在幕后，流经电路的电子。但这只是事件与属性不同的一种方式。

当您将<lightning：button>上的onclick属性设置为组件控制器中的操作处理程序时，将在这两个组件之间创建一个直接关系。他们是联系在一起的，当他们使用公共API保持彼此独立时，他们仍然是耦合的。

事件是不同的。组件不会将事件发送到其他组件。事实并非如此。组件广播特定类型的事件。如果有一个组件对这种类型的事件作出响应，并且该组件“听到”了你的事件，那么它就会采取行动。

您可以将属性和事件之间的区别视为有线电路和无线电路之间的区别。我们在这里不是说无线电话。一个组件不能获得另一个组件的“编号”并调用它。那将是一个属性。不，事件就像无线广播。你的组件到达收音机，并发出一条消息。有没有人打开收音机，并调整到正确的频率？你的组件没有办法知道 – 所以你应该以这样的方式编写你的组件，如果没有人听到他们广播的事件。 （也就是说，事情可能不起作用，但什么都不应该崩溃。）

好的，足够的理论，让我们做一些特定的应用程序，看看事件如何在代码中工作。我们将开始实施报销？复选框。然后，我们将采取我们所学到的，并用它来重构“添加费用”表格到自己的组件，这是伟大的工程师的意图。

首先，我们将重点放在Reimbursed__c字段的<lightning：input>上的点击处理程序。

<lightning:input type="toggle" 
            label="Reimbursed?"
            name="reimbursed"
            class="slds-p-around--small"
            checked="{!v.expense.Reimbursed__c}"
            messageToggleActive="Yes"
            messageToggleInactive="No"
            onchange="{!c.clickReimbursed}"/>

1. 获取已更改的费用项目。
2. 创建一个服务器操作来更新基础费用记录。
3. 将费用计入行动。
4. 设置一个回调来处理响应。
5. 触发操作，将请求发送到服务器。
6. 当响应到来并且回调运行时，更新费用属性。

呃，什么费用属性？再看看我们的组件标记。没有开支，只是一个单一的开支。嗯，对，这个组件只是一个单一的项目。在费用清单组件上有一个费用属性…但这甚至不是“真正的”费用。真正的是顶级费用组件中的一个组件属性。嗯。

有没有一个component.get（“v.parent”）？或者，它必须是component.get（“v.parent”）。get（“v.parent”） – 让我们得到父母的父母的引用，所以我们可以在那里设置费用？

停止。对。那里。

组件不会触及其他组件，并在其上设置值。没有办法说“嘿，祖父母，我会更新费用。”组件保持自己的手。当一个组件想要一个祖先组件改变某些东西时，它会问。奈斯利。通过发送一个事件。

这是最酷的部分。发送事件看起来几乎与直接处理更新相同。这是clickReimbursed处理程序的代码。

({
    clickReimbursed: function(component, event, helper) {
        var expense = component.get("v.expense");
        var updateEvent = component.getEvent("updateExpense");
        updateEvent.setParams({ "expense": expense });
        updateEvent.fire();
    }
})

1. 获取更改的费用。
2. 创建一个名为updateExpense的事件。
3. 将费用打包到事件中。
4. Fires 事件。

回调的东西丢失，但否则这是熟悉的。但是…什么是处理调用服务器和服务器响应，并更新主费用数组属性？我们怎么知道这个updateExpense事件呢？

updateExpense是一个自定义事件，也就是我们自己写的一个事件。你可以这样说，因为与获取服务器动作不同，我们使用component.getEvent（）而不是component.get（）。另外，我们所得到的没有价值提供者，只是一个名字。我们将在一瞬间定义这个事件。

至于什么是处理调用服务器和处理响应，让我们来谈谈它。我们可以在costItem组件中实现服务器请求并处理响应。然后，我们会发送一个事件，只是放弃依赖于费用数组的事情。这将是一个完全有效的设计选择，并将保持费用项目组件完全独立，这是可取的。

但是，正如我们将看到的，创建新费用的代码和更新现有费用的代码非常相似，足以避免重复的代码。因此，我们所做的设计选择是发送一个updateExpense事件，主费用组件将处理。后来，当我们重构我们的表单时，我们也会创建一个新的开销。

通过让所有子组件委托处理服务器请求和管理费用数组属性的责任，我们打破封装一点。但是，如果将这些子组件视为费用组件的内部实现细节，那也没关系。主要费用部分是独立的。

您可以选择：合并关键逻辑或封装。您可以在Lightning Components中进行权衡，就像在任何软件设计中进行权衡一样。只要确保你记录的细节。

我们要做的第一件事是定义我们的自定义事件。在开发者控制台中，选择 File | New | Lightning Event, 并将事件命名为“updateEvent”。用下面的标记替换默认的内容。

<aura:event type="COMPONENT">
    <aura:attribute name="expense" type="Expense__c"/>
</aura:event>

我们已经看过如何在clickReimbursed操作处理程序中实际触发一个事件。但是要做到这一点，我们需要做最后一件事，那就是注册事件。将这一行标记添加到费用项组件，正好在其属性定义下方。

    <aura:registerEvent name="updateExpense" type="c:expensesItemUpdate"/>

了解这里的区别，以及如何将一个事件用于多种目的，是学习Lightning组件的灯泡时刻。如果你还没有那个时刻，那么当你看其余的代码的时候，你就会拥有它。

在开始处理事件之前，让我们总结一下发送它们的过程。

1. 通过创建闪电事件定义自定义事件，给它一个名称和属性。
2. 注册您的组件发送这些事件，通过选择一个自定义事件类型，并给这种类型的具体使用一个名称。
3. 通过以下方式在控制器（或助手）代码中触发事件：
   1. 使用component.getEvent（）来创建特定的事件实例。
   2. 用fire（）发送事件。

如果你继续执行所有我们刚刚看过的代码，你可以测试一下。重新加载您的应用程序，并切换报销？复选框几次。如果你错过了一步，你会得到一个错误，你应该重新检查你的工作。如果你做的一切正确…嘿，等等，花费改变颜色显示其报销？状态，就像预期的一样！

这个行为在我们开始这个单位之前就已经存在了。这就是<lightning：input>组件具有value =“{！v.expense.Reimbursed__c}”集合的效果。切换开关时，费用的本地版本将更新。但是这个改变没有被发送到服务器。如果您查看Salesforce中的费用记录，或重新加载应用程序，则不会看到更改。

为什么不？我们只做了一半的工作来为我们的活动创建一个完整的电路。我们必须通过在另一端创建事件处理程序来完成电路布线。该事件处理程序将负责将更改发送到服务器，并使更新持久。

使费用项组件发送一个事件需要三个步骤。启用费用组件来接收和处理这些事件需要三个并行的步骤。

1. 定义一个自定义事件。我们已经做到了这一点，因为费用项目正在发送费用正在接收的相同的自定义事件。
2. 注册组件来处理事件。这将事件映射到动作处理程序。
3. 实际上在动作处理程序中处理事件。

由于我们已经完成了第一步，我们立即转到第二步，注册费用来接收和处理updateExpense事件。就像注册发送一个事件一样，注册来处理一个事件是一行标记，你应该在init处理程序之后添加到费用组件中。

     <aura:handler name="updateExpense" event="c:expensesItemUpdate"
        action="{!c.handleUpdateExpense}"/>

    handleUpdateExpense: function(component, event, helper) {
        var updatedExp = event.getParam("expense");
        helper.updateExpense(component, updatedExp);
    }

    updateExpense: function(component, expense) {
        var action = component.get("c.saveExpense");
        action.setParams({
            "expense": expense
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                // do nothing!
            }
        });
        $A.enqueueAction(action);
    },

想一想。之前，在测试发送事件（如果不是之前）时，我们看到了费用项组件的颜色是否改变以响应已报销的？复选框。记得解释吗？费用记录的本地副本已经更新！所以，至少现在，当服务器告诉我们它已经成功地更新它的版本时，我们不必做任何事情。

请注意，此代码仅处理服务器成功更新费用记录的情况。如果出现错误，我们肯定会有一些工作要做。说，会计将这笔费用标记为无法报销，因此无法将此字段设置为true。但是，正如他们所说，这是另一天的教训。

让我们回到我们看到的那个机会来分解一些常见的代码。除了回调之外，这两个辅助函数是相同的。所以，我们来创建一个新的，更广义的函数，将回调作为参数。

    saveExpense: function(component, expense, callback) {
        var action = component.get("c.saveExpense");
        action.setParams({
            "expense": expense
        });
        if (callback) {
            action.setCallback(this, callback);
        }
        $A.enqueueAction(action);
    },

    createExpense: function(component, expense) {
        this.saveExpense(component, expense, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var expenses = component.get("v.expenses");
                expenses.push(response.getReturnValue());
                component.set("v.expenses", expenses);
            }
        });
    },

    updateExpense: function(component, expense) {
        this.saveExpense(component, expense);
    },

那个小小的重构练习是如此令人满意，使用事件是如此（我们很抱歉）让人激动，让我们再做一次，但是做得更大。更多的牛铃！

接下来的任务包括从费用组件中提取“添加费用”表单，并将其移至自己的新组件。提取表单标记很简单，只需简单的复制粘贴练习即可。但是还有什么动作呢？在我们开始移动碎片之前，让我们先思考一下什么是移动和停留。

在当前的设计中，表单的动作处理器clickCreate处理输入验证，将请求发送到服务器，并更新本地状态和用户界面元素。表单仍然需要一个动作处理程序，而且应该还可以处理表单验证。但是我们打算让其余的留下来，因为我们将我们的服务器请求逻辑合并到费用组件中。

所以有一点点（但只有一点点），在那里戏弄。那么我们的计划就是先移动表单标记，然后尽可能少地移动，以使其正常工作。我们将重构这两个组件以通过事件进行通信，而不是直接访问费用数组组件。

让我们开始吧！

在主费用组件中，选择两个<！ – CREATE NEW EXPENSE – >注释之间的所有内容，包括开始和结束注释本身。把它剪切到你的剪贴板。 （是的，切，我们承诺）

创建一个新的Lightning组件，并将其命名为“expenseForm”。将复制的“添加费用”表单标记粘贴到<aura：component>标记之间的新组件中。

返回费用组件。将新的expenseForm组件添加到标记中。这部分费用应该是这样的。

    <!-- 新的费用表格 -->
    <lightning:layout >
        <lightning:layoutItem padding="around-small" size="6">
            <c:expenseForm/>
        </lightning:layoutItem>
    </lightning:layout>

现在我们需要做一些实际的改变。但是这些会很熟悉，因为我们只是添加事件发送，这是我们之前做的费用项目。您会记得，expenseItem还会发送一个由费用组件处理的费用负载的事件。

在expenseForm助手中，创建createExpense函数。

    createExpense: function(component, newExpense) {
        var createEvent = component.getEvent("createExpense");
        createEvent.setParams({ "expense": newExpense });
        createEvent.fire();
    },

    <aura:registerEvent name="createExpense" type="c:expensesItemUpdate"/>

    <aura:handler name="createExpense" event="c:expensesItemUpdate"
        action="{!c.handleCreateExpense}"/>

    handleCreateExpense: function(component, event, helper) {
        var newExpense = event.getParam("expense");
        helper.createExpense(component, newExpense);
    },

在我们进入夕阳之前，或更确切地说，挑战之前，这里是两个适度的视觉改善。

首先，你有没有注意到报销和相关日期时间标签在绿色背景上几乎是看不见的蓝色？

如果它也困扰着你，那么这里是如何解决它的。 （我们一直这样做直到我们将表单重构为自己的组件）。在费用项目组件中，通过单击STYLE按钮添加一个样式资源。用下面的代码替换默认的样式规则。

.THIS.slds-theme_success .slds-form-element__label {
    color: #ffffff;
}
.THIS.slds-theme_success .slds-text-title {
    color: #ffffff;
}

最后，我们想通过添加一些容器组件来改进我们的应用程序的布局。最后一点也让您有机会在所有的变化之后看到完整的费用部分。在费用组件中，将费用列表标记替换为以下内容。

<lightning:layout>
    <lightning:layoutItem padding="around-small" size="6">
        <c:expensesList expenses="{!v.expenses}"/>
    </lightning:layoutItem>
    <lightning:layoutItem padding="around-small" size="6">
        Put something cool here
    </lightning:layoutItem>
</lightning:layout>

到目前为止，我们所做的一切都是严格的客户端。我们还没有将开支节省回到Salesforce。创建一些费用，然后打重装，会发生什么？没错，所有的费用都消失了。呜呼，免费的钱！

除了刚才所说的会计，他们对这种事情都是有些冷淡的。而实际上，我们是不是想要报销那些从我们口袋里拿出来的费用呢？哎呀！我们需要将我们的数据保存到Salesforce，不再有任何延误！

开玩笑，现在是时候把服务器端控制器添加到我们的应用程序。我们一直把这个拿回来，而我们的基础知识倒了。现在你已经准备好了，让我们潜入！

进入一些图片，就是。让我们确保我们知道我们的目标，并且在我们上路之前，我们的油箱已经满了。

首先，让我们重温一下我们在这个模块中看到的第一个图表，一个非常高层次的Lightning组件应用程序的体系结构。

到目前为止，我们所看到的一切都在这张照片的客户端上。 （注意我们通过在这里合并控制器和帮助器来简化。）虽然我们引用了一个自定义的对象类型，Expense__c，它是在服务器端定义的，但我们并没有直接触及服务器。

请记住我们如何将不同的元素连接起来以创建一个完整的电路？我们在最后一个单位建立的费用形式可能看起来像这样。

该电路以创建按钮开始，该按钮连接到clickCreate操作处理程序（1）。当动作处理程序运行时，它会从表单字段（2）中获取值，然后向费用数组（3）添加新的开销。当数组通过设置更新时，触发费用列表（4）的自动重新显示，完成电路。很简单，对吧？

那么，当我们在服务器端访问时，图表会变得更加复杂。更多的箭头，更多的颜色，更多的数字！ （暂时解释一切吧。）

而且，这个电路没有相同的平滑，同步的控制流程。服务器通话费用很高，可能需要一些时间。情况良好时为毫秒，网络拥塞时为长时间。 Lightning组件不希望应用程序在等待服务器响应时被锁定。

在等待时保持响应的解决方案是异步处理服务器响应。这意味着什么，当你点击Create Expense按钮时，你的客户端控制器触发一个服务器请求，然后继续处理。它不仅不等待服务器，它忘记了它提出的要求！

然后，当响应从服务器返回时，与请求打包在一起的代码（称为回调函数）将运行并处理响应，包括更新客户端数据和用户界面。

如果你是一个有经验的JavaScript程序员，异步执行和回调函数可能是你的面包和黄油。如果你之前没有和他们一起工作，这将是新的，也许是非常不同的。这也很酷。

我们将从阅读Salesforce数据开始，在费用应用程序启动时加载现有费用列表。

public with sharing class ExpensesController {

    // 斯特恩讲关于这里什么都没有了

    @AuraEnabled
    public static List<Expense__c> getExpenses() {
        return [SELECT Id, Name, Amount__c, Client__c, Date__c, 
                       Reimbursed__c, CreatedDate 
                FROM Expense__c];
    }
}

• 方法声明之前的@AuraEnabled注解。
  “Aura”是Lightning组件核心的开源框架的名称。您已经看到它在一些核心标签的命​​名空间中使用，如<aura：component>。现在你知道它来自哪里。
• 静态关键字。所有@AuraEnabled控制器方法都必须是静态方法，可以是公共范围或全局范围。

如果这些要求提醒您使用Visualforce的JavaScript远程功能的远程方法，那不是巧合。要求是一样的，因为架构在关键点非常相似。

另一件值得注意的事情是该方法没有做任何特殊的事情来打包Lightning组件的数据。它只是直接返回SOQL查询结果。 Lightning组件框架处理大多数情况下涉及的所有编组/解组工作。太好了！

下一步是将费用组件连接到服务器端的Apex控制器。这很容易，可能会让你头晕目眩。将费用组件的开头<aura：component>标记更改为指向Apex控制器，如下所示。

<aura:component controller="ExpensesController">

但是，指向Apex控制器并不实际加载任何数据，或者调用远程方法。就像组件和（客户端）控制器之间的自动连线一样，这个指向只是让这两个组件“彼此​​了解”。这个“知道”甚至采取了同样的形式，另一个价值提供者，我们稍后会看到。但是自动布线只有这么远。完成电路仍然是我们的工作。

在这种情况下，完成电路意味着以下。

1. 当费用组件被加载时，
2. 查询Salesforce的现有费用记录，和
3. 将这些记录添加到费用组件属性。

我们将依次采取每一个。第一个项目，当费用组件首次被加载时触发行为，要求我们编写一个init处理程序。这只是一个连接到组件的init事件的动作处理程序的简称，当组件首次创建时会发生这种情况。

你需要的接线是一行标记。将以下内容添加到组件的属性定义之下的费用组件。

<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>

一步下去，两步走。剩下的步骤都在doInit动作处理器中进行，所以让我们来看看它。将以下代码添加到费用组件的控制器。

    // 从Salesforce中加载费用
    doInit: function(component, event, helper) {

        // 创建动作
        var action = component.get("c.getExpenses");

        // 添加回复行为的时候收到响应
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.expenses", response.getReturnValue());
            }
            else {
                console.log("Failed with state: " + state);
            }
        });

        // 发送动作执行
        $A.enqueueAction(action);
    },

1. 创建一个远程方法调用。
2. 设置远程方法调用返回时应该发生的事情。
3. 排队远程方法调用。

这听起来很简单，对吧？也许代码的结构或特性是新的，但是需要发生什么的基本要求再次被熟悉。

这听起来像我们真的很鼓舞人心？比如说，也许我们试图通过一个粗糙的补丁来指导你？那么，我们需要谈论一些艰难的事情。该问题出现在函数的第一行代码中。

        var action = component.get("c.getExpenses");

好的，回到我们的代码。在我们偏离之前，我们正在看这条线。

        var action = component.get("c.getExpenses");

        $A.enqueueAction(action);

• 它将服务器请求排队。
• 就你的管制员行动而言，这是结束了。
• 你不能保证什么时候，或者如果，你会听到回来。

这是我们搁置的代码块的地方。但在我们谈论这个之前，有一点流行文化。

Carly Rae Jepsen的单曲“Call Me Maybe”于2011年发布，获得批判和商业成功，在十多个国家中名列第一。到目前为止，它已经在全球销售了超过1800万份，显然是有史以来最畅销的数字单曲之一。从合唱中最难忘的一行是“这是我的号码。所以也许打电话给我。“除了乐观和危险的吸引力之外，这是Lightning组件处理服务器调用的一个比喻。

听我们出来。让我们看看我们在伪代码中的动作处理器。

    doInit: function(component, event, helper) {
        // 从Salesforce中加载费用
        var action = component.get("c.getExpenses");
        action.setCallback(
            // 这是我的号码，也许打电话给我
        );
        $A.enqueueAction(action);
    },

        action.setCallback(this, function(response) { ... });

        action.setCallback(scope, callbackFunction);

总体效果是创建请求，打包请求完成时要执行的代码并将其发送到执行。在这一点上，动作处理器本身停止运行。

这是另一种方法来包围你的头。你可以把你的孩子捆绑上学，然后把他们上课后要回家的杂事交给他们。你在学校放弃他们，然后你去工作。当你在工作的时候，你正在做你的工作，确保你的孩子，作为一个好孩子，当他们从学校回来的时候，会完成你分配给他们的工作。你自己不这样做，而且你不知道什么时候会发生。但它确实如此。

这是看最后一个方法，再次用伪代码。此版本“展开”回调函数以显示更为线性的操作处理程序版本。

    // 不是真正的代码！不要剪贴！
    doInit: function(component, event, helper) {

        // 创建服务器请求
        var action = component.get("c.getExpenses");

        // 发送服务器请求
        $A.enqueueAction(action);

        // ... 时间流逝 ...
        // ...
        // ...危险主题扮演...
        // ...
        // ...在不确定的未来某个时候

        // 处理服务器响应
        var state = action.response.getState();
        if (state === "SUCCESS") {
            component.set("v.expenses", action.response.getReturnValue());
        }
    },

现在我们已经得到了创建一个服务器请求的结构，让我们来看看我们的回调函数实际处理响应的细节。这里只是回调函数。

    function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            component.set("v.expenses", response.getReturnValue());
        }
    }

在这个特定的回调函数中，我们执行以下操作。

1. 获取响应的状态。
2. 如果状态是成功的，也就是说，我们的要求按计划完成，那么：
3. 将组件的费用属性设置为响应数据的值。

你可能有几个问题，比如：

• 如果响应状态不是成功会发生什么？
• 如果回应永远不会到来会发生什么？ （打电话给我，可能的话。）
• 我们如何才能将响应数据分配给我们的组件属性？

前两个答案不幸的是，我们不打算在这个模块中介绍这些可能性。他们当然是你需要知道的事情，并考虑在你的真实世界的应用程序，但我们只是没有空间。

最后一个问题在这里是最相关的，但也是最容易回答的。我们为费用属性定义了一个数据类型。

<aura:attribute name="expenses" type="Expense__c[]"/>

public static List<Expense__c> getExpenses() { ... }

在我们开发应用程序的下一步之前，让我们深入一点Apex控制器。下面看看下一个版本，我们需要处理创建新记录，以及更新报销？复选框在现有的记录。

public with sharing class ExpensesController {

    @AuraEnabled
    public static List<Expense__c> getExpenses() {
        // 先执行isAccessible（）检查，然后
        return [SELECT Id, Name, Amount__c, Client__c, Date__c, 
                       Reimbursed__c, CreatedDate 
                FROM Expense__c];
    }
    
    @AuraEnabled
    public static Expense__c saveExpense(Expense__c expense) {
        // 首先执行isUpdatable（）检查
        upsert expense;
        return expense;
    }
}

    @AuraEnabled
    public static List<Expense__c> getExpenses() {
        
        // 检查以确保所有的字段都可以被这个用户访问
        String[] fieldsToCheck = new String[] {
            'Id', 'Name', 'Amount__c', 'Client__c', 'Date__c', 
            'Reimbursed__c', 'CreatedDate'
        };
        
        Map<String,Schema.SObjectField> fieldDescribeTokens = 
            Schema.SObjectType.Expense__c.fields.getMap();
        
        for(String field : fieldsToCheck) {
            if( ! fieldDescribeTokens.get(field).getDescribe().isAccessible()) {
                throw new System.NoAccessException();
                return null;
            }
        }
        
        // 好，他们很酷，让他们通过
        return [SELECT Id, Name, Amount__c, Client__c, Date__c, 
                       Reimbursed__c, CreatedDate 
                FROM Expense__c];
    }

好, </stern-lecture>.

在我们实施“添加费用”表单之前，不要作弊，我们先来看看创建新记录与阅读现有记录是不同的挑战。使用doInit（），我们只需读取一些数据，然后更新应用程序的用户界面。直截了当，即使我们必须让Carly Rae参与解释。

创建新记录涉及更多。我们将从表单中读取值，在本地创建新的费用记录，发送该记录以保存在服务器上，然后当服务器告诉我们已保存时，使用返回的记录更新用户界面服务器。

这是否会使它听起来像是很复杂？比如，也许我们需要滚石乐队和一整首歌曲来帮助我们解释下一个问题。

让我们来看看一些代码，你可以自己决定。

首先，确保已经保存了Apex控制器的更新版本，包括saveExpense（）方法的先前版本。

请记住，当我们向您展示如何处理表单提交？当至少有一个字段是无效的，你会看到一个错误消息，表单不提交。当所有字段都有效时，错误消息将被清除。

因为我们把所有的细节（和所有的作弊）都放到了辅助函数createExpense（）函数中，所以我们不需要在控制器中做任何其他的修改。到目前为止，这么容易？

所以，我们所需要做的就是在助手中更改createExpense（）函数，以完成前面提到的所有复杂的事情。这是代码。

    createExpense: function(component, expense) {
        var action = component.get("c.saveExpense");
        action.setParams({
            "expense": expense
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var expenses = component.get("v.expenses");
                expenses.push(response.getReturnValue());
                component.set("v.expenses", expenses);
            }
        });
        $A.enqueueAction(action);
    },

虽然我们已经介绍了将客户端Lightning组件代码与服务器端Apex代码连接起来的所有必要事项，但是有几件事值得你在知道的地方咬你之前指出。

第一个问题是区分大小写，这一般归结为Apex和Salesforce通常不区分大小写，但JavaScript区分大小写。也就是说，“Name”和“name”在Apex中是相同的，但在JavaScript中是不同的。

这可能会导致绝对疯狂的错误，即使是在你的面前是完全不可见的。特别是如果您一直在Salesforce上使用非Lightning组件代码一段时间，您可能根本不会再考虑对象和字段名称，方法等等的情况。

因此，对于您来说，这是一个最佳实践：始终使用每个对象，字段，类型，类，方法，实体，元素，大象或您有什么的确切API名称。总是在任何地方，即使没有关系。这样，你就不会有问题。或者，至少不是这个问题。

我们希望引起你注意的另一个问题是“必需的”的性质。我们不能拒绝重复一句着名的引语：“你继续使用这个词。我不认为这意味着你的想法。“

在我们迄今为止编写的代码中，我们已经看到至少两种不同的“必需”。在“添加费用”表单的标记中，您会看到使用两种方式的单词。例如，在费用名称字段上。

<lightning:input aura:id="expenseform" 
                 label="Expense Name"
                 name="expensename"
                 value="{!v.newExpense.Name}"
                 required="true"/> 

var validExpense = component.find('expenseform').reduce(function (validSoFar, inputCmp) {
    // 显示无效字段的错误消息
    inputCmp.showHelpMessageIfInvalid();
    return validSoFar && inputCmp.get('v.validity').valid;
}, true);

就这个单元而言，我们完成了helloWhatever-style的组件。从这里开始，我们将创建和组装我们之前预览过的费用跟踪器迷你应用程序。我们将花费大部分的单位建设和理解的形式，让你创造一个新的开支。

下一步是创建我们的费用应用程序的顶级组件。 （请记住，尽管我们将其称为“应用程序”，但它实际上只是另一个Lightning组件）。在开发者控制台中，创建一个名为“费用”的新Lightning组件，并使用以下代码替换默认标记。

<aura:component>

    <!-- PAGE HEADER -->
    <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem>
            <lightning:icon iconName="standard:scan_card" alternativeText="My Expenses"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading--label">Expenses</h1>
                <h2 class="slds-text-heading--medium">My Expenses</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
    <!-- / PAGE HEADER -->

    <!-- 新的费用表格 -->
    <lightning:layout>
        <lightning:layoutItem padding="around-small" size="6">

        <!-- [[ 费用表单在这里]] -->

        </lightning:layoutItem>
    </lightning:layout>
    <!-- / NEW EXPENSE FORM -->

</aura:component>

现在还不是很多，但是看到SLDS造型已经有了效果，这真是令人兴奋。请记住，我们不会解释大部分SLDS标记，但我们将在标记中包含注释。你可以看到我们如何为应用程序创建标题，并开始获得这个想法。

在我们开始表格之前，我们先来确认一下：我们要做的只是暂时的。记住所有的谈话谈话谈论分解你的应用程序分成更小的组件，然后从那里建立？我们现在还没有这样做 – 还没有 – 坦率地说，这有点作弊。

但是，这样做会使代码不能太复杂太快。我们这样做，所以我们可以一次集中一堂课。而且，对于你自己来说，这不是一个坏的方法：在一个组件内部构建，直到它变得太忙，然后重构并分解成更小的子组件。只要你记得重构！

好，</ preaching>。在费用组件中，将<！ – [[费用表单转到此处]] – >注释替换为添加费用表单的以下代码。

    <!-- 创建新的费用 -->
    <div aria-labelledby="newexpenseform">

        <!-- BOXED AREA -->
        <fieldset class="slds-box slds-theme--default slds-container--small">

        <legend id="newexpenseform" class="slds-text-heading--small 
          slds-p-vertical--medium">
          Add Expense
        </legend>
  
        <!-- 创建新的费用表格 -->
        <form class="slds-form--stacked">          
            <lightning:input aura:id="expenseform" label="Expense Name"
                             name="expensename"
                             value="{!v.newExpense.Name}"
                             required="true"/> 
            <lightning:input type="number" aura:id="expenseform" label="Amount"
                             name="expenseamount"
                             min="0.1"
                             formatter="currency"
                             step="0.01"
                             value="{!v.newExpense.Amount__c}"
                             messageWhenRangeUnderflow="Enter an amount that's at least $0.10."/>
            <lightning:input aura:id="expenseform" label="Client"
                             name="expenseclient"
                             value="{!v.newExpense.Client__c}"
                             placeholder="ABC Co."/>
            <lightning:input type="date" aura:id="expenseform" label="Expense Date"
                             name="expensedate"
                             value="{!v.newExpense.Date__c}"/>
            <lightning:input type="checkbox" aura:id="expenseform" label="Reimbursed?"  
                             name="expreimbursed"
                             checked="{!v.newExpense.Reimbursed__c}"/>
            <lightning:button label="Create Expense" 
                              class="slds-m-top--medium"
                              variant="brand"
                              onclick="{!c.clickCreate}"/>
        </form>
        <!-- / 创建新的费用表单-->
  
      </fieldset>
      <!-- / BOXED AREA -->

    </div>
    <!-- / 创建新的费用 -->

这是由此产生的形式。

但首先，我们需要看看值属性。每个标签都有一个值，设置为一个表达式。例如，{！v.newExpense.Amount__c}。从表达的格式，你应该能够推断出一些东西。

• v表示这是视图值提供程序的属性。这意味着这是组件上的一个属性。 （我们还没有创建。）
• 基于点符号，你可以知道newExpense是某种结构化的数据类型。也就是说，newExpense本身具有属性。还是……字段？
• 从大多数属性名称末尾的“__c”中，您可以猜测这些映射回自定义字段，最有可能在费用自定义对象上。
• 所以，newExpense可能是一个费用对象！

很酷，我们还没有讨论这个呢！这里是实际的属性定义，您应该在打开<aura：component>标签之后添加到组件顶部。

    <aura:attribute name="newExpense" type="Expense__c"
         default="{ 'sobjectType': 'Expense__c',
                        'Name': '',
                        'Amount__c': 0,
                        'Client__c': '',
                        'Date__c': '',
                        'Reimbursed__c': false }"/>

所以我们有一个表格。现在，如果您填写并点击按钮来创建新的费用，会发生什么？除非你已经提前创建了它，否则你将会得到关于缺少控制器操作的另一个错误。这是因为控制器和<lightning：button>上指定的操作处理程序都没有被创建。

在Developer Console中，单击费用组件的CONTROLLER按钮以创建控制器资源。然后用下面的代码替换默认的代码。

({
    clickCreate: function(component, event, helper) {
        var validExpense = component.find('expenseform').reduce(function (validSoFar, inputCmp) {
            // 显示无效字段的错误消息
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && inputCmp.get('v.validity').valid;
        }, true);
        // 如果我们通过错误检查，做一些真正的工作
        if(validExpense){
            // Create the new expense
            var newExpense = component.get("v.newExpense");
            console.log("Create expense: " + JSON.stringify(newExpense));
            helper.createExpense(component, newExpense);
        }
    }
})

1. 设置
2. 处理表单值
3. 如果没有错误，请做一些事情

这种结构对您来说可能是熟悉的，因为这是在Web应用程序中处理用户输入的基本方法。让我们看看每个步骤，看看他们如何在闪电组件。

对于设置，我们所做的只是初始化错误检查的状态。这是一个简单的标志，这是一个有效的开支？每次调用clickCreate操作处理程序时，我们都会假设费用数据正常，然后在发现问题时使其无效。下面是validExpense标志的简要说明，初始值设置为true。

• component.find(‘expenseform’) 获取需要验证的<lightning：input>字段数组的引用。如果ID是唯一的，则引用返回组件。在这种情况下，ID不是唯一的，引用返回一个组件数组。
• JavaScript reduce（）方法将数组减少为由validSoFar捕获的单个值，该值保持为真，直到找到无效字段，将validSoFar更改为false。无效字段可以是空的必填字段，具有低于指定最小数字的字段的字段等等。
• inputCmp.get(‘v.validity’).valid返回数组当前输入字段的有效性。
• inputCmp.showHelpMessageIfInvalid() 显示无效字段的错误消息。 <lightning：input>提供了默认的错误消息，可以通过messageWhenRangeUnderflow等属性进行自定义，您可以在费用表单中看到该消息。

让我们进入一些有趣的细节。回到helloMessageInteractive，我们没有使用find（）来找出被点击的按钮的标签文本。这是因为我们不需要。我们可以通过使用event.getSource（）将其从事件参数中拉出来直接获得对该按钮的引用。你并不总是有这种奢侈;事实上，从用户输入中获得的所有内容都只来自事件，这是非常罕见的。

所以，当你的控制器需要一种方法来获取子组件时，首先在标记中设置该组件上的aura：id，然后使用component.find（theId）在运行时获取组件的引用。

1. 不要试图创造费用。
2. 显示有用的错误消息。

首先，当inputCmp.get（’v.validity’）。valid引用的字段有效性计算结果为false时，我们将validExpense标志设置为false。第二，我们利用内置的验证错误或为错误提供自定义消息。在费用表单中，如果该字段为空，并且您尝试提交表单，则所需的名称字段将显示“完成此字段”。但是，您可以通过指定messageWhenValueMissing =“您忘了我吗？”来提供您自己的自定义消息。

相反，如果该字段通过验证，则validExpense标志的计算结果为true，并且不显示任何错误。

就这一点而言，我们正在处理表单提交的第三步：实际上是在创造费用！正如您所看到的，为了做好准备，我们从component属性中获取完整的newExpense对象：component.get（“v.newExpense”）。这给我们一个单一的变量，我们可以用它来创建一个新的费用记录。

但是，在我们做到这一点之前，您需要考虑一个问题：为什么我们不从NewExpense中提取表单值呢？在动作处理程序的开始处获取一次结构化变量，然后访问它的属性，而不是一系列find（）。get（）调用？

原因很简单：因为我们需要对各个字段的引用来调用showHelpMessageIfInvalid（）。验证原始表单数据也是一个很好的做法。您的验证逻辑不知道在newExpense对象内可能发生什么类型的处理。

记得早些时候我们说过把费用表单放在主要的组件上有点作弊了吗？那么，下一节没有得到“一点”限定符。我们在这里做的只是避免真正创造记录的复杂性。而现在我们正在避免它，因为那是整个下一个单位。所以，让我们用简单的东西来包装这个，但是这仍然给我们一些重要的概念。

首先，我们创建一个“存储”新开支的地方。我们将简单地创建一个本地支出数组来保存它们。在费用组件标记的顶部，在newExpense属性之前，添加一个新的费用属性，该属性将包含一组费用对象。

    <aura:attribute name="expenses" type="Expense__c[]"/>

• 组件的帮助程序是将代码在几个不同的操作处理程序之间共享的合适位置。
• 组件的帮助程序是放置复杂的处理细节的好地方，所以您的操作处理程序的逻辑保持清晰和精简。
• 助手功能可以有任何功能签名。也就是说，它们不受控制器中动作处理程序的限制。 （这是为什么呢？因为你直接从你的代码中调用helper函数，相反，框架通过框架运行时调用动作处理函数。）这是一个约定和推荐的做法，总是提供组件作为帮助函数的第一个参数。

好吧，让我们继续吧。在开发人员控制台中，单击费用组件的HELPER按钮以创建关联的助手资源，然后将示例代码替换为以下内容。

({
    createExpense: function(component, expense) {
        var theExpenses = component.get("v.expenses");
 
        //将费用复制到一个新的对象这是一个令人讨厌的，暂时的黑客
        var newExpense = JSON.parse(JSON.stringify(expense));
 
        theExpenses.push(newExpense);
        component.set("v.expenses", theExpenses);
    }
})

这里有什么新东西是第一次，我们正在更新一个集合，一个数组。如果你是一个有经验的程序员，你可能想知道：“为什么我需要set（）在这里？

也就是说，component.get（“v.expenses”）获取存储在组件属性中的数组的引用。 component.set（“v.expenses”，theExpenses）只是将组件属性设置为相同的引用。当然，在这之间，数组的内容已被添加到，但容器是相同的：数组的引用实际上并没有改变！那么，为什么更新呢？

如果您无法理解这意味着什么，请在关键语句之前和之后添加两条日志语句，并将这些Expenses的内容转储到控制台。

console.log("创建之前的开支: " + JSON.stringify(theExpenses));
theExpenses.push(newExpense);
component.set("v.expenses", theExpenses);
console.log("创建后的费用: " + JSON.stringify(theExpenses));

所以，对于所有讨论“神奇地”更新任何使用{！v.expenses}的东西，猜猜看是什么。没有别的使用它，但。我们来解决这个问题。

在开发人员控制台中，创建一个名为expenseItem的新Lightning组件，并使用以下代替默认标记。如果您已经创建了费用项目，只需更新标记。您已经看到了之前访问费用记录中的字段的表达式。该版本包含SLDS标记，使其更加时尚。另外，使用{！v.expense.Reimbursed__c？ ‘slds-theme-success’：”}当费用已经报销时，表达式在容器上设置绿色。

<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="formatdate" type="Date"/>
    <aura:attribute name="expense" type="Expense__c"/>


    <lightning:card title="{!v.expense.Name}" iconName="standard:scan_card"
                    class="{!v.expense.Reimbursed__c ?
                           'slds-theme--success' : ''}">
        <aura:set attribute="footer">
            <p>Date: <lightning:formattedDateTime value="{!v.formatdate}"/></p>
            <p class="slds-text-title"><lightning:relativeDateTime value="{!v.formatdate}"/></p>
        </aura:set>
        <p class="slds-text-heading--medium slds-p-horizontal--small">
           Amount: <lightning:formattedNumber value="{!v.expense.Amount__c}" style="currency"/>
        </p>
        <p class="slds-p-horizontal--small">
            Client: {!v.expense.Client__c}
        </p>
        <p>
            <lightning:input type="toggle" 
                             label="Reimbursed?"
                             name="reimbursed"
                             class="slds-p-around--small"
                             checked="{!v.expense.Reimbursed__c}"
                             messageToggleActive="Yes"
                             messageToggleInactive="No"
                             onchange="{!c.clickReimbursed}"/>
        </p>
    </lightning:card>
</aura:component>

({
    doInit : function(component, event, helper) {
        var mydate = component.get("v.expense.Date__c");
        if(mydate){
            component.set("v.formatdate", new Date(mydate));
        }
    },
})

<aura:component>

    <aura:attribute name="expenses" type="Expense__c[]"/>

    <lightning:card title="Expenses">
        <p class="slds-p-horizontal--small">
            <aura:iteration items="{!v.expenses}" var="expense">
                <c:expenseItem expense="{!expense}"/>
            </aura:iteration>
        </p>
    </lightning:card>

</aura:component>

<c:expensesList expenses="{!v.expenses}"/>

到目前为止，我们只使用XML风格的标记。到目前为止，让组件的输出更改的唯一方法是更改​​该标记。到目前为止，我们的组件没有对用户输入做出反应。到目前为止，我们还没有编写任何JavaScript。

这个单位的所有变化。

为了开始，我们来看一个非常简单的组件，想象一下为了处理它的简单行为需要做些什么。

这是helloMessageInteractive，很难想象一个简单的组件“做些什么”。它是一些静态文本，一个（当前空白）消息和两个按钮。代码如下：

<aura:component>
 
    <aura:attribute name="message" type="String"/>
 
    <p>Message of the day: {!v.message}</p>
 
    <div>
        <lightning:button label="You look nice today."
            onclick="{!c.handleClick}"/>
 
        <lightning:button label="Today is going to be a great day!"
            onclick="{!c.handleClick}"/>
    </div>
 
</aura:component>

我们将首先承认，并不是每一个你会在Lightning Components中看到的错误信息都像你所希望的那样有帮助。但是这个是！它说没有名为“handleClick”的控制器操作。 “handleClick”从哪里来？它来自我们分配给两个<lightning：button>标签中每一个的onclick属性的表达式：

onclick="{!c.handleClick}"

哎呦！控制器基本上是一组代码，用于定义应用程序在“事情发生”时的行为，其中“事物”是指用户输入，定时器和其他事件，数据更新等等。如果你在任何数量的开发者网站上查找“模型 – 视图 – 控制器”，你会得到不同的定义。就我们的目的而言，对于Lightning组件，控制器是组件包中的一个资源，该组件包含该组件的操作处理程序。而动作处理程序只是具有特定功能签名的JavaScript函数。

({
    handleClick: function(component, event, helper) {
        var btnClicked = event.getSource();         // the button
        var btnMessage = btnClicked.get("v.label"); // the button's label
        component.set("v.message", btnMessage);     // update our message
    }
})

名称 – 值对和特定函数签名的组合是一个动作处理程序。您将会听到或看到交替使用的术语“动作处理程序”，“控制器动作”和“控制器功能”，而且大部分都是正确的。他们几乎总是提到同样的事情。 （我们不会担心这个模块中的异常。）

不要太担心控制器资源的特殊格式。当您在开发者控制台中点击CONTROLLER按钮时，您将获得一个已添加示例操作处理程序的控制器资源。一个技巧是 – 如果你忘记了，你会得到语法错误 – 你需要在操作处理程序之间加逗号。这只是基本的JavaScript语法，我们稍后会看到具体细节。

实际的handleClick函数只有四行代码，但起初似乎很难理解。在高层次上，这很简单：点击按钮时，其操作处理程序被调用（1）。在动作处理程序中，控制器获取被单击的按钮，将标签文本从中拉出，然后将组件的消息属性设置为该文本（2）。并且当天的消息被更新（3）。你今天看起来不错！

很简单，对吧？好…

因为这是非常重要的，让我们逐行分解。

handleClick: function(component, event, helper) {

操作处理程序名称，后跟一个匿名函数声明。这里重要的是函数签名。虽然这不是技术上的要求，但您应该始终声明您的控制器功能采取这三个参数。现在我们将更多地讨论它们，但是现在这些参数代表：

• component—组件。在这种情况下，它是helloMessageInteractive。
• event—导致操作处理程序被调用的事件。
• helper—组件的助手，另一个可重用函数的JavaScript资源。

    var btnClicked = event.getSource();         // the button

    var btnMessage = btnClicked.get("v.label"); // the button's label

    component.set("v.message", btnMessage);     // update our message

好的，检查一下时间。这是有道理的吗？当然？如果你这么想，确保你已经使用前面的代码创建了helloMessageInteractive组件。它是一个组件，复制/粘贴代码需要两分钟的时间，但能够使用它是理解处理操作的关键。

你在这里做的事情看起来很简单，因为它不是很多代码行。但是这些代码行说明了使用Lightning组件构建应用程序的一些基本概念。

您可以将组件连接到动作处理程序上，将它们连接起来。将helloMessageInteractive想象成一个简单的电路。有开关，还有灯泡。 （Lightning组件框架提供电源。）本身，一个开关可能会发出一个很好的咔哒声，但是直到你连接它，它不是功能。你可以有最时尚的爱迪生风格的灯泡，但直到你把它连接起来，它不会照亮任何东西。

Lightning组件也是如此。就在前面，我们说组件捆绑中的不同资源是相互“自动连接”的。这是真的：接线采取v和c值提供商的形式。它们会自动创建并在您的组件中可用，因此您的控制器可以引用组件，反之亦然。但是这个自动接线只发生在组件.cmp资源和控制器.js资源之间的高层次 – helloMessageInteractive中。这是下图中的绿色箭头。

将一个特定的<lightning：button>组件连接到一个特定的动作处理程序 – 也就是将产生事件的东西（比如按钮）连接到处理事件的东西，比如一个特定的控制器功能 – 这是你需要的连线自己做。其实，你只是做了你自己！这些是完成工作电路所需的红色箭头。

将{！c.handleClick}添加到<lightning：button>组件（1）的onclick属性，将其连接到特定的操作处理程序。调用component.set（“v.message”，newMessage）（2）将该操作处理程序的结果连接到组件的消息属性。它本身连接到{！v.message}表达式。

您可以进一步将onclick事件视为沿着您创建的电路流动的电子。如果你还没有创建一个完整的电路，事件不会发生，没有任何反应。当你开始编写自己的组件时，记住这一点。你有一个完整的电路？你确定？如果有疑问，有时候可以在白板或纸上画出全部草图，并确认每个连接。

你会把组件，事件和处理程序连接在一起，所以你经常会感觉像电工。 （或者，考虑到框架的名字，也许是本·富兰克林。）把事情联系在一起是Lightning组件的基本编程模型。

所以，我们再做一些。毕竟，练习是完美的。

我们的handleClick的第一个版本是三行代码，因为我们将get-process-set模式中的每一步分解成单独的行。你可以使用一些叫做函数链的东西把它们折成较少的行。由于您可能会在其他Lightning组件代码中看到这一点，因此我们可以让它自己旋转。在handleClick之后，将以下附加代码添加到helloMessageInteractive控制器中。

    handleClick2: function(component, event, helper) {
        var newMessage = event.getSource().get("v.label");
        component.set("v.message", newMessage);
    },

    handleClick3: function(component, event, helper) {
        component.set("v.message", event.getSource().get("v.label"));
    }

当然，通过将onclick属性设置为{！c.handleClick2}或{！c.handleClick3}，您无法验证新的动作处理程序是否正常工作，直到连线<lightning：button>才能使用其中的一个。把它看作是从一个灯泡断开电线，然后把它们连接到另一个灯泡。就这么简单！

在这一点上，你重新加载应用程序，点击一个重新布线的按钮，…呃，这是相同的设计，不是吗？我们甚至可以告诉哪个动作处理程序被调用？

有时候简单是最好的。让我们添加一些记录到一个动作处理函数：

    handleClick2: function(component, event, helper) {
        var newMessage = event.getSource().get("v.label");
        console.log("handleClick2: Message: " + newMessage);
        component.set("v.message", newMessage);
    },

到目前为止，虽然我们已经创建了几个组件，并且在构建应用程序方面学到了一些（高层次的），但是我们编写的代码并没有做比HTML更简单的工作。也就是说，我们创建的两个组件输出相同的静态文本，不管我们做什么。你可以把他们放在同一个屏幕上，他们总是会说同样的事情。

无聊。

要改变这一点，我们需要学习两件事情。首先，我们需要学习如何使组件在创建时接受输入。也就是说，我们需要在组件上设置值。我们使用属性来做这件事。

（我们需要学习的第二件事是如何实际使用这些值来改变组件的行为和输出，在我们弄清楚属性之后，我们会这样做）。

组件上的属性就像对象中的实例变量一样。这是一种保存更改值的方法，也是一种命名这些值占位符的方法。例如，假设我们想编写一个打印自定义消息的helloMessage组件。我们可以想象为这个组件添加一个消息属性来定制它的输出。然后，我们可以在将组件添加到我们的应用程序时设置该消息，如下所示。

<aura:component>
	  
    <c:helloMessage message="You look nice today."/>
	    
</aura:component>

1. 组件属性是可以存储值的地方。在前面的例子中，helloMessage组件有一个名为message的组件属性。大多数时候我们正在讨论组件属性。
2. 您可以使用<aura：attribute>标签定义组件属性。我们稍后会看到一个例子。我们来调用这些属性定义。
3. 使用它时，<aura：attribute>标签本身就具有属性！ 😖也就是说，使用<aura：attribute>标记定义组件属性时，可以在<aura：attribute>上设置属性，以指定要定义的组件属性的“形状”。 😡等等，让我们再试一次：通过设置属性定义的属性来添加一个组件属性定义。 component组件属性的属性定义是否具有属性？ 😴
   这就是为什么作家😱。我们试着用一些代码来解决这个术语问题。 😄

下面是我们的helloMessage组件的开始：

<aura:component>

    <aura:attribute name="message" type="String"/>

    <p>Hello! [ message goes here, soon ]</p>

</aura:component>

👍 ?

我们在这里使用的另一个属性是type，我们已经设置了它，因为它在属性定义中是必需的。它说消息属性包含一个字符串，这是有道理的。我们将详细讨论属性数据类型和属性定义的其他部分，但是首先让我们学习表达式，然后让helloMessage实际上做一些事情。

不要再让我们迷失，而是让我们按照预期使用helloMessage。

<aura:component>

    <aura:attribute name="message" type="String"/>

    <p>Hello! {!v.message}</p>

</aura:component>

我们使用表达式{！v.message}输出消息的内容。也就是说，这个表达式引用了消息属性。表达式被评估，并解析为当前存储在消息中的文本字符串。这就是表达式输出到组件主体的内容。

嗯…这是什么“表达”？

表达式基本上是一个公式或计算，您将其放在表达式分隔符（“{！”和“}”）中。所以，表达式如下所示：

{!<expression>}

表达式的正式定义有点令人生畏，但让我们看一下，然后解压它：表达式是可以解析为单个值的任何一组字面值，变量，子表达式或运算符。

是的，基本上是一个公式，就像你在计算领域，过滤标准或Visualforce中写的一样。公式或表达式可以包含各种各样的东西。字面值应该是显而易见的;他们是像数字42，或字符串“你好”的东西。变量就像消息属性一样。运算符就像+， – 等等，子表达式基本上意味着你可以使用括号把事物分组在一起。

让我们试试这个，让我们的表情稍微复杂一些。

<aura:component>

    <aura:attribute name="message" type="String"/>

    <p>{!'Hello! ' + v.message}</p>

</aura:component>

{!$Label.c.Greeting + v.message}

<aura:component>
    <aura:attribute name="customMessage" type="String"/>
    <p> <c:helloMessage message="{!v.customMessage}"/> </p>
</aura:component>

实际上，我们需要谈谈表情的另一个方面。在前面的例子中，我们用v.message引用了helloMessage组件的消息属性。什么是“v”部分？

v是所谓的价值提供者。价值提供者是分组，封装和访问相关数据的一种方式。价值提供者是一个复杂的话题，所以现在把v想象成一个可供你使用的自动变量。在我们的组件中，v是视图的值提供者，它是helloMessage组件本身。

v给你一个“钩子”来访问组件的消息属性，这就是你如何访问组件的所有属性。

值提供者中的值作为命名属性被访问。要使用值，请使用点（句点）分隔值提供程序和属性名称。例如，v.message，正如我们所见。

当组件的属性是对象或其他结构化数据（即不是原始值）时，使用相同的点符号访问该属性上的值。例如，{！v.account.Id}访问帐户记录的Id字段。对于深度嵌套的对象和属性，继续添加点来遍历结构并访问嵌套的值。

访问结构化数据是讨论属性的一个很好的部分，特别是关于非基本属性类型。消息是一个字符串，但是有许多不同的属性类型。

• 原始数据类型，如布尔值，日期，日期时间，十进制，双精度，整数，长或字符串。任何编程语言通常的使用的。
• 标准和自定义Salesforce对象，例如Account或MyCustomObject__c。
• 集合，例如List，Map和Set。
• 自定义Apex类。
• 特定于框架的类型，如Aura.Component或Aura.Component []。这些比我们在这个模块中会更先进，但是你应该知道它们存在。

这是一个精简的费用项目组件，我们将在稍后填写。它演示了如何为自定义对象定义属性，以及如何访问记录中的字段。

<aura:component>

    <aura:attribute name="expense" type="Expense__c"/>

    <p>Amount:
        <lightning:formattedNumber value="{!v.expense.Amount__c}" style="currency"/>
    </p>
    <p>
        Client: {!v.expense.Client__c}
    </p>
    <p>
        <lightning:input type="toggle"                            
                         label="Reimbursed?"                           
                         name="reimbursed"                         
                         checked="{!v.expense.Reimbursed__c}" />
     </p> 
    <!-- Other markup here -->

</aura:component>

当涉及到您在<aura：attribute>标签上设置的属性时，以下是您需要了解的其余部分。

• 默认属性定义了默认的属性值。它在引用属性时使用，但尚未设置该属性的值。
• 必需的属性定义属性是否是必需的。默认值是false。
• description属性定义了属性及其用法的简要摘要。

为具有复杂数据类型的属性设置默认值可能有些棘手。不过，我们稍后会看到一个例子，所以现在我们只是把你的头抬起来。

为了说明更多关于属性和表达式的概念，让我们用下面的标记创建一个非常愚蠢的组件helloPlayground。

<aura:component>

    <aura:attribute name="messages" type="List"
        default="['You look nice today.',
            'Great weather we\'re having.',
            'How are you?']"/>


    <h1>Hello Playground</h1>

    <p>Silly fun with attributes and expressions.</p>


    <h2>List Items</h2>

    <p><c:helloMessage message="{!v.messages[0]}"/></p>
    <p><c:helloMessage message="{!v.messages[1]}"/></p>
    <p><c:helloMessage message="{!v.messages[2]}"/></p>


    <h2>List Iteration</h2>

    <aura:iteration items="{!v.messages}" var="msg">
        <p><c:helloMessage message="{!msg}"/></p>
    </aura:iteration>


    <h2>Conditional Expressions and Global Value Providers</h2>

    <aura:if isTrue="{!$Browser.isIPhone}">
        <p><c:helloMessage message="{!v.messages[0]}"/></p>
    <aura:set attribute="else">
        <p><c:helloMessage message="{!v.messages[1]}"/></p>
        </aura:set>
    </aura:if>

</aura:component>