1

私は最初のBackboneアプリで苦労していて、物事のコツをつかみ始めました。サーバー（NodeJS）からJSONデータをロードし、テンプレート（Handlebars）にデータを入力し、フロントエンドで比較的適切にレンダリングする、いくつかの成功したレポートがあります。

私が遭遇している問題<select>は、テンプレートの1つから入ってくるオブジェクトにイベントハンドラーを追加しようとしていて、あまり運がないということです。

テンプレートは次のとおりです。

// 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 Dev Toolsの要素も調べましたが、オブジェクトにイベントリスナーが設定されていません。

私はこれに何時間も立ち往生しており、バックボーンイベントリスナーに関する他のすべての提案を確認しました（つまりthis.el、ビューをインスタンス化するときにパラメーターとして渡す）が、成功していません。

どんな助けやアイデアもいただければ幸いです！

4

1 に答える 1

1

でinitialize、あなたは書く

@el = $('.containerOuter')

ただし、Backbone.jsはevents 以前に initialize処理します。つまり、これらのイベントはすでに別のイベントにバインドされて@elいます（DOMでは孤独と見なされますdiv）。

make作成に使用される関数をオーバーライドすることで、これをハックでき@elます。

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