onRenderの要素で動作しません。

Question

onRenderメソッド（またはitem:renderedコールバック）のHTML要素の一部を処理しようとすると失敗します。

例：

 
Bars.EditGallery = Backbone.Marionette.ItemView.extend 
    template: 'bars/edit_gallery' 
    className: 'edit-gallery' 

    onRender: -> 
    # If I just write @$('select').chosen(), it doesn't work 
    # despite the jQuery object contains what I expect. 
    # To get it working, I have to write: 
    callback = -> @$('select').chosen() 
    setTimeout(callback, 0) 

それがフィールドにフォーカスを与えるように、他のアクションと同じです。
どうすれば対処できますか？ setTimeoutのトリックが動作しますが、それほどエレガントではありません。

Answer 1

この問題は、this issueに記載されているChosenによって引き起こされます。

Answer 2

これは、レンダリングに使用されたテンプレートが非同期に読み込まれる場合に発生します。最近のリリースで私がプルリクエストを修正したと思った。あなたはマリオネットのどのバージョンを使用していますか？

しかし、あなたはJSTを使用しているようですが、問題ではないはずです。セットアップ中にレンダリングが非同期的に発生する原因がありますか？

しかし、非同期の問題が発生している可能性があります。 setTimeoutを使用すると問題が解決されるため、onRenderメソッドが呼び出される前にレンダリングが完了していないと思われます。

また、jQueryセレクターが実際にあなたが望むオブジェクトを実際に返しているかどうかを知ることができます。セレクタを確認するためにconsole.logを使用している場合、これは誤った結果をもたらしている可能性があります。 console.logはそれ自体が非同期です（ほとんどのブラウザでは、とにかくすべてについてはわかりません）。これは、アイテムをログに記録するリクエストがイベントループの最後にキューに入れられることを意味します。ロギングが発生するまでにDOM要素が利用可能である可能性があります。

FWIW：この正確な目的のために私はonRenderを定期的に使用しています。私はそれを動作させるためにsetTimeoutを使用する必要はありませんでした。ですから、私の前提は、非同期のものに関連するレンダリングプロセスでは面白いことです。