jquery - setTimeout 関数が Marionette ItemView/CollectionView DOM スコープの問題を解決するのはなぜですか?

Question

私は次の設定をしています：

    var LayerItemView = Backbone.Marionette.ItemView.extend({

    tagName: 'li',
    className: 'stage-layer',
    template: '#layer-item-tpl',

    initialize: function() {
           $(this.el).attr('id' 'layer-'+this.model.id);
    },

    onRender: function() {
    App.vent.trigger('layer:rendered', this.model);
    }

});

私が信じていたように、DOM 要素 layer-[id] が利用可能になるはずです。eventHandler は次に、各モデルの Raphael キャンバスを、次のように新しく作成された DOM 要素に作成します。

var paper1 = new Raphael(document.getElementById('layer-1'), 896,504);  
var paper2 = new Raphael(document.getElementById('layer-2'), 896,504);  
var paper3 = new Raphael(document.getElementById('layer-3'), 896,504);  
etc.

しかし、Raphael からエラーが返されます: Uncaught TypeError: Cannot read property 'x' of undefined

これは、レイヤ ID を持つ要素がまだ DOM で利用できないことを示しています。私は単純な setTimeout で問題を解決します (一種のこれを行います):

setTimeout(function() {
  var paper1 = new Raphael(document.getElementById('layer-1'), 896,504);  
  var paper2 = new Raphael(document.getElementById('layer-2'), 896,504);  
  var paper3 = new Raphael(document.getElementById('layer-3'), 896,504);    
},0);

私はこれに満足していません。それは正しい練習でしょうか？これが機能する理由と、それが良い習慣であるかどうかを理解したい