Backbone.js：渲染后在视图上触发事件答案

【问题标题】：Backbone.js: trigger an event on a view after the renderBackbone.js：渲染后在视图上触发事件
【发布时间】：2012-03-19 03:42:35
【问题描述】：

有没有办法绑定一个事件在主干视图中完成渲染后发生？

我正在尝试将 jQuery 日期范围选择器附加到单击链接后附加到 DOM 的输入，但如果我在渲染期间执行此操作，则范围选择器出现在错误的位置（因为输入尚未获得 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

【问题讨论】：

标签： jquery view backbone.js coffeescript render

【解决方案1】：

一种方法是在渲染完成后从父视图触发自定义事件。 $('body').trigger('my-rendering-is-done')（更好的方法是在从调用代码呈现的视图上触发它）。并在您的视图中有一个使用 makeDateRangePicker 的侦听器。

【讨论】：

【解决方案2】：

我会试试这个：

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 以改为使用事件元素。

【讨论】：

【解决方案3】：

编辑：所以，我最后一次尝试解决方案不是。

您的意思是在您致电jQuery(@el).html 后，预期的html 不存在？这听起来很奇怪。我认为这可能就像您需要引用您的属性值一样简单：

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

注意' 周围的date_range 单引号。

编辑：抱歉，在验证它实际上似乎在没有引号的情况下工作后。我以前也被类似的东西咬过。无论如何，如果现在的问题是正确的（在更新了有关在单击事件中添加输入的信息之后），那么您应该在附加元素后立即调用makeDateRangePicker，对吧？

【讨论】：

对不起，应该在问题中提到这个视图是在页面上另一个元素的点击事件之后加载的，所以等待 document.ready 不会解决它。
我已经回答过了。所以你说input[name= ...我想我明白了。编辑我的答案。

【解决方案4】：

你通常可以使用setTimeout 来处理这种事情，超时时间为零。 setTimeout(..., 0) 本质上是在浏览器再次获得控制权后将要调用的函数排队。像这样的：

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

我经常在谷歌地图上使用这个技巧来使其定位和大小合适。

【讨论】：