Прослушиватели событий в Backbone View не добавляются к объектам в DOM - PullRequest
Новая
       19

Прослушиватели событий в Backbone View не добавляются к объектам в DOM

1 голос
/ 18 сентября 2011

Я боролся со своим первым приложением Backbone и начал осваивать вещи. Теперь у меня есть несколько успешных отчетов, которые загружают данные JSON с моего сервера (NodeJS), заполняют шаблон (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: примечание: я вызываю представление изнутри '$ ->', поэтому его не следует загружать до 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' в качестве параметра при создании экземпляра вашего представления), но не имел успех.

Любая помощь или идеи будут оценены!

1 Ответ

1 голос
/ 18 сентября 2011

В initialize вы пишете 

@el = $('.containerOuter')

Но Backbone.js обрабатывает events до initialize, что означает, что он уже связал эти события с другим @el (который вы должны видеть в DOM как одинокий div).

Вы можете взломать это, переопределив make, функцию, которая используется для создания @el: 

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