0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Salesforce1 LightningAdvent Calendar 2014

Day 17

コンポーネントをrendering時に上書きする

Posted at

#コンポーネントをrendering時に上書きする

render時にコンポーネントの表示を上書きする方法を書きます。
やってみたのはいいのですが、考えば考えるほど、なんだか微妙です・・・・、これでいいのか。
何かに気がついた人はコメントください。

※注意点
・render関数でコンポーネントを修正する場合には、superRender関数を呼び出します。
呼び出さなかった場合、画面にコンポーネントは表示されません。

以下のコードではユーザの言語が英語の場合、画面のラベルを英語に変更して出力します。
コンポーネントは、日本語でLabelを書いています。

AdventCalendarCmp.cmp
<aura:component controller="TLP.AdventCal">      
    <ui:outputText aura:id="waitingMsg" value="ただいまデータを取得中です。"/>

    <ui:inputText aura:id="childName" label="名前"  
                  value="{!v.child.Name}" 
                  class="form-control" 
                  placeholder="名前を登録してください"/>

</aura:component controller="TLP.AdventCal">

Render関数内で、ロケールを所得し、ユーザの言語が「en」(英語)の場合、メッセージや、ラベル等を英語に変換します。

AdventCalendarCmpRender.js
({
    render:function(cmp,helper){
        var d = this.superRender();
		var locale = $A.get("$Locale.language");
        if(locale === 'en'){
			cmp.find('waitingMsg').set("v.value","Now Loading ...");
            cmp.find('childName').set("v.label","Name"); 
            cmp.find('childName').set("v.placeholder","Please input your name");
        }
		return d;
    },

このように表示が変わります。
Salesforceでトランスレーションワークベンチを使ってる人からしてみるとこれアリかなぁという感じです・・・。
Aura.jpg

ラベルを書き換えるところで、こんな感じで呼び出そうと思ったら怒られてしまいました。
cmp.find('childName').set("v.label","Name").set("v.placeholder","Please input your name");
Aura.jpg

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?