Lightningコンポーネントのデータのリスト表示を共有します。
Apexコントローラ
public class LeadController {
@AuraEnabled
public static List<Lead> findAll() {
return [SELECT Id, LastName, Company FROM Lead ORDER BY LastModifiedDate DESC LIMIT 50];
}
}コンポーネント
<!-- 手順6 -->
<aura:component controller="LeadController" implements="force:appHostable">
<!--
<aura:component implements="force:appHostable">
-->
<!-- 手順2 -->
<aura:attribute name="target" type="String" default="world"/>
<!-- 手順3 -->
<aura:attribute name="switch" type="Boolean" default="false" />
<!-- 手順１ -->
<h1>Hello, Lightning Component!!</h1>
<!-- 手順2 -->
<h1>Hello, {!v.target}!</h1>
<!-- 手順3 -->
<h1>ボタンクリックでON/OFF</h1>
<!-- 手順3 -->
<aura:If isTrue="{!v.switch}">
<p>ON</p>
<aura:set attribute="else">
<p>OFF</p>
</aura:set>
</aura:If>
<!-- 手順3 -->
<ui:button label="{!v.switch ? 'OFFにする' : 'ONにする' }" press="{!c.toggle}"/>
<!-- 手順4 -->
<ui:inputText aura:id="input" label="名前" value=""/>
<ui:outputText aura:id="output" value=""/><br/>
<ui:button aura:id="submit" label="設定" press="{!c.set}"/>
<!-- 手順5 -->
<div class="white">白</div>
<h3>黒</h3>
<ul>
<li class="red">赤</li>
<li class="blue">青</li>
<li class="green">緑</li>
</ul>
<!-- 手順6 -->
<!-- Leadオブジェクトの配列を属性にもつ -->
<aura:attribute name="leads" type="Lead[]"/>
<!-- 表示ライフサイクル中に発火されるinitイベント購読 -->
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<h3>リード表示</h3>
<ul>
<aura:iteration items="{!v.leads}" var="lead">
<li>
<p>
{!lead.Company}<br/>
{!lead.LastName}
</p>
</li>
</aura:iteration>
</ul>
</aura:component>コンポーネントコントローラ
({
toggle: function(component, event, helper) {
//-- 手順3 --
var status = component.get("v.switch");
component.set("v.switch", !status);
},
set: function(component, event, helper) {
//-- 手順4 --
// 入力コンポーネントから属性値取得
var inputValue = component.find("input").get("v.value");
// 入力コンポーネントへ属性値セット
var output = component.find("output");
output.set("v.value", inputValue);
// コンポーネントの属性値取得(仕組みを把握するためのコードでこの変数"target"は利用しない)
var target = component.get("v.target");
// コンポーネントの属性値セット
component.set("v.target", inputValue);
},
doInit: function(component, event, helper) {
//-- 手順6 --
// initイベント処理
// Apexコントローラのアクションを取得
var action = component.get("c.findAll");
// Apexコントローラ処理後のコールバック設定
action.setCallback(this, function(a){
component.set("v.leads", a.getReturnValue());
});
// 実行アクションキューに追加
$A.enqueueAction(action);
}
})動作確認する。
https://[ yourdomain ]/c/CreateComponentAppliction.app
例えば、
https://testdaeheuitest-test11-dev-ed.lightning.force.com/c/CreateComponentAppliction.app結果
