SFDC：Lightning開発『CSSクラス』の追加とグローバルID

Lightning Componentの開発では『$A.util.addClass』と『$A.util.removeClass』でCSSのクラスを追加したり除外したりといったことが可能になっています。

<div aura:id="changeIt">Change Me!</div><br />

({
    applyCSS: function(cmp, event) {
        var el = cmp.find('changeIt');
        $A.util.addClass(el.getElement(), 'changeMe');
    },
    removeCSS: function(cmp, event) {
        var el = cmp.find('changeIt');
        $A.util.removeClass(el.getElement(), 'changeMe');
    }
})

divタグなどのIDを指定する際に『aura:id=』と指定することでaddClassやremoveClassの実行時に『cmp.find』や『getElement()』を使用して対象のタグの情報を取得することができます。

もし『aura:id』ではなく普通に『id=』と宣言した場合は、document.getElementByIdでも同じことは可能です。

<li id="titleSort"></li>

$A.util.addClass(document.getElementById('titleSort'), 'selected');

このようにIDを指定した場合、他のコンポーネントと一緒になる可能性があります。それを回避するため・・・かはわかりませんが、Lightning ComponentにはグローバルIDというコンポーネントインスタンスに対して生成される一意の IDが用意されています。

次のように記載することでグローバルIDを付与したIDを設定することができます。

<li id="{!globalId + 'titleSort'}"></li>

var globalId = component.getGlobalId();
$A.util.addClass(document.getElementById(globalId + 'titleSort'), 'selected');

『component.getGlobalId();』でコンポーネントのグローバルIDを取得できます。ちなみにグローバルIDの中身は次のようになっていました。

※console.logで表示してます。

基本的には『aura:id=』と指定する方法が良さそうですが、『id=』と指定する必要がある場合はグローバルIDを利用するようにするといいかもしれません。

関連