Backbone.js：レンダリング後のビューでイベントをトリガーする

Question

レンダリングがバックボーンビューで終了した後にイベントをバインドする方法はありますか？

リンクをクリックした後にDOMに追加される入力にjQuery Date Range Pickerをアタッチしようとしていますが、レンダリング中にそれを行うと、範囲ピッカーが間違った場所に表示されます入力にまだDOM位置が与えられていない）。したがって、日付ピッカーを添付する前に、入力がレンダリングされるまで待つ必要があります。 Coffeescriptは以下の通りです。

@makeDateRangePicker編集日付ピッカー

class window.ClientDestinationPricingFieldsView extends ModelSaverView 
    template: (json) -> 
    _.template(jQuery("#special-pricing-timeframe-template").html()) json 

    render: -> 
    jQuery(@el).html @template(@model.toJSON()) 
    @makeDateRangePicker jQuery(@el).find("input[name=date_range]") 
    this 

Answer 1

私はこれをしようとするだろう：

class window.ClientDestinationPricingFieldsView extends ModelSaverView 
    events: 
    'click input[name=date_range]': 'makeDateRangePicker' 

    template: (json) -> 
    _.template(jQuery("#special-pricing-timeframe-template").html()) json 

    render: -> 
    jQuery(@el).html @template(@model.toJSON()) 
    this 

は、あなたが代わりにイベント要素を取るために@makeDateRangePickerを変更する必要があります。

Answer 2

をINITS機能である：だから、解での私の最後の刺しではありませんでした。

jQuery(@el).htmlに電話した後、予想されるhtmlはありません。それは非常に奇妙に聞こえる。 date_range周り

jQuery(@el).find("input[name='date_range']") 

注'単一引用符：私はあなたの属性値を引用する必要があることとして、それは同じくらい簡単かもしれないと思います。

編集：申し訳ありませんが、実際に引用符なしで動作するように確認してください。私は前に似たようなものに噛まれてきました。とにかく、今のように質問が正しい場合（クリックイベントで入力を追加する情報が更新された後）、要素を追加した直後にmakeDateRangePickerに電話する必要があります。

Answer 3

通常、setTimeoutをタイムアウト0で使用できます。 setTimeout(..., 0)は、ブラウザが再び制御権を持つと、呼び出される関数を基本的にキューに入れます。

render: -> 
    jQuery(@el).html @template(@model.toJSON()) 
    setTimeout 
    => @makeDateRangePicker jQuery(@el).find("input[name=date_range]") 
    0 
    @ 

Googleマップでこのトリックを使用して、適切な位置とサイズにすることがよくあります。

Answer 4

これを行う1つの方法は、レンダリングが完了した後に親ビューからカスタムイベントをトリガーすることです。 $('body').trigger('my-rendering-is-done')（より良い方法は、呼び出し元のコードからレンダリングされているビューでトリガすることです）。 makeDateRangePickerを使用するリスナーをあなたのビューに持っています。