Question

是否有办法在骨干视图中完成渲染后绑定事件？

我正在尝试将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

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

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

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

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

请注意'附近的date_range单引号。

编辑抱歉，在确认它实际上似乎没有引号之后。我以前被类似的东西咬了。无论如何，如果问题现在是正确的（在更新了有关在点击事件中添加输入的信息之后），那么你应该在追加元素之后立即调用makeDateRangePicker，对吗？

Answer 3

对于这类事情，您通常可以使用setTimeout超时为零。 setTimeout(..., 0)基本上将浏览器再次控制后要调用的函数排队。像这样：

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

我经常在谷歌地图上使用这个技巧，使其正确定位和调整大小。

Answer 4

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

的监听器

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

4 个答案: