1

複数回レンダリングされるバックボーン ビューの jQuery クリック イベントを作成する最良の方法は何ですか? ビューのイニシャライザで $().on() を使用する必要があるようですが、レンダリング後に呼び出さない限り機能しません。

基本的に、テーブルをレンダリングし、行のクリック イベントをチェックしています。これが私が試していることです（coffeescriptで）。これは動作しません -

class MyGridView extends Backbone.View
  el: '#myGrid'
  template: _.template(TableTmpl)

  initialize: -> 
    # $('tr',@el).on 'click', -> console.log($(@).attr('model')) # WRONG
    $(@el).on 'click', 'tr', -> console.log($(@).attr('model')) # CORRECT

  render: ->
    $(@el).empty()
    $(@el).append(@template({data: @collection.getPage()}))

これは機能しますが、孤立したクリック イベントが作成されますか?

class MyGridView extends Backbone.View
  el: '#myGrid'
  template: _.template(TableTmpl)

  render: ->
    $(@el).empty()
    $(@el).append(@template({data: @collection.getPage()}))
    $('tr',@el).click -> console.log($(@).attr('model'))

アップデート：

$().on() のパラメーターが欠落していたため、機能しませんでした。また、これを処理するより良い方法のように思われるイベントも試しました。これは次のように機能しました。

class MyGridView extends Backbone.View
  el: '#myGrid'
  template: _.template(TableTmpl)
  events: {'click tr', 'selectModel'}

  selectModel: ->
    model = $(e.target).parent().attr('model')
    console.log(model)

  render: ->
    $(@el).empty()
    $(@el).append(@template({data: @collection.getPage()}))
    $('tr',@el).click -> console.log($(@).attr('model'))
4

2 に答える 2

1

eventsこのためにプロパティを使用する必要があります。それが目的です。

class MyGridView extends Backbone.View
  el: '#myGrid'
  events:
    'click tr': 'click'
  template: _.template(TableTmpl)
  render: ->
    @$el.empty()
    @$el.append(@template({data: @collection.getPage()}))
    @
  click: ->
    console.log($(@).attr('model'))

@$elまた、BackboneにはすでにjQueryがラップelされてキャッシュされており、render通常はビューが返されるため、への切り替えにも注意してください。さらに、バックボーンビューに$は、のショートカットであるメソッドがあるため、の代わりに@$el.find(...)言うことができます。@$('tr')$('tr', @el)

デモ： http： //jsfiddle.net/ambiguous/ud6dU/

手動でイベントをバインドすることをいじる必要はありません（ほとんどの場合）。ビューは、ビューとビューにアタッチされeventsたjQueryを使用して、これらすべてを処理します。delegateel

于 2012-10-15T15:20:44.753 に答える
1

liveの代わりに使用するかon、バックボーンのeventsオブジェクトを使用する必要があると思います。

于 2012-10-15T14:30:54.510 に答える