[Salesforce]Lightning コンポーネント‐手順４：入力値表示

手順３の続きとして、入力値表示を共有します。

コンポーネント

<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}"/>
    
</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);
    }
})

動作確認する。

https://[ yourdomain ]/c/CreateComponentAppliction.app
例えば、
https://testdaeheuitest-test11-dev-ed.lightning.force.com/c/CreateComponentAppliction.app