🧊

Marionette.ViewのonShow/onRenderの違い

backbone.js - marionette.js view difference between onShow vs onRender? - Stack Overflow

こういう記事もあるようですが、
似てるけどどっち使えば良いの？ってなったときに。

この差を知ってこそのマリオネッターですよ。

どちらもフックとして使える

var HogeView = Marionette.ItemView.extend({
    onRender: function() { console.log('onRender!'); },
    onShow:   function() { console.log('onShow!');   }
});

で、

var hogeLayout = new HogeLayout();
hogeLayout.someRegion.show(new HogeView()); // -> onRender! -> onShow!

みたく使う。
本当に便利な仕組みです・・。

ドキュメントによると

View onShow

This event can be used to react to when a view has been shown via a region.

ふむ。

View onRender

Triggered after the view has been rendered.
You can implement this in your view to provide custom code for dealing with the view's el after it has been rendered.

ふむふむ。

Region.showのコードを読む

最終的に信じられるのはコードということで。
さっきみたくRegionに対してViewをshowする一般的な使い方だと、

// Marionette.Region @v2.3.0
  show: function(view, options){

    // 略...

    if (_shouldShowView) {

      view.render();  // [1] ここでView.onRender

      // 略...

      Marionette.triggerMethodOn(view, 'show', view, this, options); // [2] ここでView.onShow

      return this;
    }

    return this;
  }

View.renderのコードも見とく

// Marionette.ItemView @v2.3.0
  render: function() {
    this._ensureViewIsIntact();

    this.triggerMethod('before:render', this);

    this._renderTemplate();
    this.bindUIElements();

    this.triggerMethod('render', this); // さっきの[1]の実態はコレ

    return this;
  },

というわけでした。

てなわけで、

  • ViewがonShowするのはあくまでRegionによって
  • なのでRegion.show()されないならonShowは発火しない
  • ViewのonRenderは、new View().render()のタイミング
  • renderされただけでは、実際のDOMに存在するかは定かではない(使い方によるので)
  • 自分配下の要素にアクセスする分にはonRender後ならOK

いやーほんと便利・・。