' P '

whatever I will forget

Auraコンポーネント　コントローラー

Salesforce JavaScript

コントローラーとは？

  • 基本的にコードのコレクションであり、「何かが実行された」ときのアプリケーションの動作を定義する

LightningコンポーネントとMVCモデルとの違い

  • LightningコンポーネントはView-Controller-Controller-Model もしくは View-Controller-Controller-Database
  • Salesforceとやりとりする場合、クライアント側、サーバー側のコントローラーが必要になるためController-Controllerの関係になる

コンポーネントにボタンを作成する

下記のコードにより、ボタンを作成することができる。

    <div>
        <lightning:button label="You look nice today." onclick="{!c.handleClick}"/>
    </div>

解説

  • {!c.handleClick}に割り当てられたコントローラーが動作する
  • c.handleClick は、値プロバイダ (c) とプロパティ (handleClick) の構成
    • c は、コンポーネントのクライアント側コントローラの値プロバイダ
    • handleClick は、そのコントローラに定義された関数です。
  • {!c.handleClick}と書くことによってクリックされた際にjavascript関数を動作させることができる！

上記のcomponentに関連づけたController

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

解説

  • 以下に示す3つはほぼ全てのコンポーネントに対して繰り返すパターン
  • クライアント側Contorollerは３つの引数を取る必要がある
  • event.getSource()
    • Callすると、クリックされた特定の <lightning:button> への参照が取得できる
  • btnClicked.get("v.label")
    • 参照の内部にあるラベルを取得できる。すなわちこれを行うためにはevent.getSource()を行なって呼び出し元の<lightning:button>を取得しておく必要がある。（当たり前）
  • component.set("v.message", btnMessage)
    • 値を書き込む
    • set()はcomponentに対してcallする
  • もちろん下記のように書くこともできる
    handleClick2: function(component, event, helper) {
        let newMessage = event.getSource().get("v.label");
        console.log("handleClick2: Message: " + newMessage);
        component.set("v.message", newMessage);
    },
    handleClick3: function(component, event, helper) {
        component.set("v.message", event.getSource().get("v.label"));
    }
  • console.log()を書けば、通常のJsページと同じように、ブラウザのConsoleにlogを出すことができる！

Trailhead

trailhead.salesforce.com

この練習時のAppを動かしたいんだけど、、？

salesforce.stackexchange.com

動くようにはなったけど、チャレンジのコードは動かず...
一応下記で通るけど、非常にモヤモヤ

({
    packItem : function(component, event, helper) {
        let item = component.get("v.item");
        console.log(item); // これ値取れてない、オブジェクトを実際に渡してないからよね？
        item.Packed__c = true;
        component.set("v.item", item);
        event.getSource().set("v.disabled", true);
    }
})

developer.salesforce.com