Question

我一直在努力完成我的第一个Backbone应用程序并开始掌握一切。我现在有一些成功的报告，从我的服务器（NodeJS）加载JSON数据，填充模板（Handlebars），并在前端相对很好地呈现。

我遇到的问题是我正在尝试将事件处理程序添加到来自我的某个模板的对象中，而且我没有太多运气。

以下是模板： //报告 - 新客户

script(type='text/x-handlebars-template', id='newClients-template')
  // Start Listing
  {{#each report}}
  .listingName
    .youSearched
      | Stylist:
    .srchResult
      select.chzn-select(id='stylists', style='width:350px')
        option(value='null') All Stylists
        {{#each stylists}}
        option(value='{{uid}}') {{name}}
        {{/each}}
  .clear

这是 Backbone View： 注意：我正在'$ - ＆gt;'中调用该视图所以在DocumentReady

之前不应该加载

  # View
  class window.NewClientsView extends Backbone.View

    events: 
      'click #stylists': 'selectStylist'

    initialize: ->
      @el = $('.containerOuter')
      _.bindAll this, 'render'
      @collection.bind 'reset', @render

      # Compile Handlebars template at init (Not sure if we have to do this each time or not)
      source = $('#newClients-template').html()
      @template = Handlebars.compile source

      # Get the latest collections
      @collection.fetch()

    render: ->
      # Render Handlebars template
      renderedContent = @template { report: @collection.toJSON() }
      $(@el).html renderedContent

      return this

    selectStylist: (e) ->
      console.log 'hit it!'
      console.log e

我希望无论何时点击或更改下拉列表，我都会看到'selectStylist'功能被触发。不幸的是，还没有发生:(我也检查过Chrome Dev Tools中的元素，并且没有在对象上设置事件监听器。

我已经坚持了几个小时了，并且已经审查了Backbone事件监听器的所有其他建议（即在实例化视图时传入'this.el'作为参数），但是没有取得了任何成功。

任何帮助或想法都将不胜感激！

Answer 1

在initialize中，您可以写

@el = $('.containerOuter')

但是Backbone.js在 events之前处理initialize - 这意味着它已经将这些事件绑定到另一个@el（您应该在DOM中看到它）作为孤独的div）。

您可以通过覆盖用于创建make的函数@el来解决此问题：

make: -> $('.containerOuter')[0]

Backbone View中的事件监听器未添加到DOM中的对象

1 个答案: