Salesforce Lightning Component开发小试牛刀
先说明几点 component中的Controller 是绑定后台与之交互的Apex类,该类的方法上需要有@AuraEnabled注解。handler是在组件加载中回调的一个方法 action表示的是调用组件中Controller.JS文件当中的哪
一个方法。这样说可能太抽象,具体看代码。
component文件代码:
<aura:component implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes,force:appHostable" description="HelloLightning" controller="FirstLingtningController">
<aura:attribute name="myList" type="List"/> <aura:handler name="init" value="{!this}" action="{!c.Init}"/> <table class="slds-table slds-table_bordered slds-table_cell-buffer"> <thead> <tr class="slds-text-title_caps"> <th>Id</th> <th>Account Name</th> </tr> </thead> <tbody> <aura:iteration items="{!v.myList}" var="obj"> <tr> <td>{!obj.Id}</td> <td>{!obj.Name}</td> </tr> </aura:iteration> </tbody> </table> </aura:component>
ControllerJs文件中代码 :
({ Init : function(component, event, helper) { var action = component.get("c.getAccounts");//调用后台方法 action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS") { component.set("v.myList",response.getReturnValue());//将返回的结果给申明的变量赋值 } }); $A.enqueueAction(action); } })
后台Apex类代码:
public class FirstLingtningController { @AuraEnabled public static List<Account> getAccounts() { return [select Id,Name from Account Limit 20]; } }
显示效果: