Edited at

コンポーネント属性はtypoに注意

More than 3 years have passed since last update.

Lightning ComponentではJavaScriptが組み合わさったことでtypoに弱くなっており、現時点ではエラーなどが追いづらい状況なので、注意が必要です。

コンポーネントの属性値について、大文字・小文字が違うケース、typoしているケースについて検証してみました。


 検証用ソースコード


SampleProp.app

<aura:application>

<(namespace):SamplePropCmp />
</aura:application>


SamplePropCmp.cmp

<aura:component>

<aura:attribute name="message" type="String" default="No Click." />
<h1>{!v.message}</h1>
<ui:button label="Click me!" press="{!c.clickMe}"/>
</aura:component>


SamplePropCmpController.js

({  

clickMe : function(component, event, helper) {
// match
console.log(component.get("v.message"));
component.set("v.message", 'Click Me!');
console.log(component.get("v.message"));
// ignore
console.log(component.get("v.Message"));
component.set("v.Message", 'Click Me, Twice!');
console.log(component.get("v.Message"));
// typo
console.log(component.get("v.messege"));
component.set("v.messege", 'Click Me, Three Times!');
console.log(component.get("v.messege"));
}
})


検証結果(Winter'15)

検証結果は下記のようになりました。大文字・小文字が違っていても問題なく値を設定・取得できます。typoしたときはエラーになりません。

ケース
get
set

一致

大文字・小文字が異なる

typoで不一致
エラーにならずundefinedが返される
エラーにならない


追加検証(Spring'15)

Spring'15から大文字・小文字を区別するようになったので、追加検証を行いました。今回の検証で新たに気がついたことがありました。<aura:attribute>で定義されていない属性についても一度setすればgetできるようになっている点です。状況によってはますます混乱しそうな仕様なので気をつけたいところです。

ケース
get
set
set -> get

一致


大文字・小文字が異なる
undefined

typoで不一致
undefined