1

我一直在努力完成我的第一个 Backbone 应用程序，并且已经开始掌握事情的窍门。我现在有一些成功的报告，它们从我的服务器 (NodeJS) 加载 JSON 数据，填充模板 (Handlebars)，并在前端相对较好地呈现。

我遇到的问题是我正在尝试将事件处理程序添加<select>到来自我的一个模板的对象中，但我运气不佳。

这是模板：

// Report - New Clients

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

这是主干视图： 注意：我从内部调用视图，$ ->所以它不应该加载，直到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 开发工具中的元素，并且没有在对象上设置事件侦听器。

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

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

4

1 回答 1

1

在initialize中，你写

@el = $('.containerOuter')

但是 Backbone.jsevents 在之前 initialize处理——这意味着它已经将这些事件绑定到不同的事件@el（您应该在 DOM 中将其视为孤独的div）。

您可以通过覆盖make用于创建的函数来破解它@el：

make: ->
  $('.containerOuter')[0]
于 2011-09-17T21:42:41.767 回答