LoginSignup
0
0

More than 5 years have passed since last update.

コンポーネントを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