LoginSignup
6
8

More than 5 years have passed since last update.

データの読み込み時に「しばらくお待ちください」を表示する。

Last updated at Posted at 2014-12-10

データの読み込み時に「しばらくお待ちください」を表示する。

コンポーネントがロードされるタイミングに合わせて処理を行うためには、renderer.jsに処理を記述します。
「コンポーネント名+Renderer.js」という名前でjavascriptファイルが作成されます。

Renderer.jsには4つのメソッドを上書きすることが出来ます。

# 関数 説明
1 render コンポーネントの読込開始のタイミングで呼び出される。このタイミングでコンポーネントの要素にアクセスしても取得できない。renderを記述するとフレームワークがコンポーネントを作成する処理を上書きしてしまうので、「this.superRender()」を呼び出してコンポーネントを作成する必要がある。
2 afterRender コンポーネントの作成が終わった後に呼び出される。このタイミングだとコンポーネントを取得できる。※afterRenderを上書きすると、値が入力フィールドに入力した値がバインドされない事象を確認中・・・。継続して調べてますが、使用には要注意。 render関数だけでなく、afterRenderでも「this.superAfterRender」関数を呼び出して上げる必要がありました。
3 rerender コンポーネント内の要素を再描画する際に、呼び出される。
4 unRender コンポーネントを破棄したタイミングで呼び出される(らしい)。まだ使ってないです。
renderer.js
({
    render:function(cmp,helper){
      var ele = $A.util.getElement('waiting'); //ここでElementを取得してもnull
      var s = this.superRender();      
      return s;
    },

    afterRender:function(cmp,helper){
      var ele = $A.util.getElement('waiting'); //ここだとElementを取得できる
    },

    rerender:function(cmp,helper){
        var ele = $A.util.getElement('waiting');  //当然ここでもElementを取得できる。
    }
})


上記をふまえて、初期表示時に「しばらくお待ちください」を表示させるための実装をしてみました。

doInitのアクションで、childListを取得してきます。
childListを取得してくる間、画面に「しばらくお待ちください」を出します。

<aura:component controller="TLP.AdventCal">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <div id="waiting">しばらくお待ちください</div>
    <aura:attribute name="childList" type="List"/>
    <div>
        <aura:iteration var="item" items="{!v.childList}">
                <div>{!item.Name}</div>
                <div>{!item.parentName}</div>
        </aura:iteration>
    </div>
</aura:component>

データを取得後、rerender関数が呼び出されるため、そこで、「しばらくお待ち下さい」を非表示にするためにクラスを追加します。

AdventCalendarRenderer.js
({
    rerender:function(cmp,helper){
        var ele = $A.util.getElement('waiting');
        $A.util.addClass(ele,'nonDisplay');
    }
})

スタイルで要素を非表示にします。

AdventCalendarCmp.css
.THIS.nonDisplay{
    display:none;
}
6
8
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
6
8