Question

Is there a way to bind an event to occur after the render is finished in a backbone view?

I’m trying to attach a jQuery Date Range Picker to an input which is appended to the DOM after a link is clicked, but if I do it during the render, the range picker appears in the wrong place (because the input hasn’t been given a DOM position yet). So, I need to wait until after the input has been rendered before I attach the date picker. Coffeescript is below.

@makeDateRangePicker is a function that inits the date picker

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

I would try this:

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

You would have to modify @makeDateRangePicker to take an event element instead.