0

backbone.relational と backbone.localstorage を介して実装された 2 つのモデルがあり、うまく機能しています。

そして私は2つのビューを持っています。最初は「単一アイテム」ビューアで、2つ目はレンダリング機能を備えたアイテムビューで、単一アイテムビューを希望どおりに表示します。問題はイベントが機能せず、親ビューでも単一アイテム ビューで。そのコードを同様の方法で再実装して、どのように機能しないかを示しました (コードは coffeescript にあります)。

log = console.log

class $.Girl extends Backbone.RelationalModel
  localStorage: new Backbone.LocalStorage 'gals'
  initialize: -> if typeof @get('id') is 'undefined' then @save() else @fetch()

class $.Girls extends Backbone.RelationalModel
  localStorage: new Backbone.LocalStorage 'gals'
  relations:[{
    type: Backbone.HasMany
    key: 'gals'
    relatedModel: $.Girl
    includeInJson: 'id'
  }]
  initialize: ->
    if typeof @get('id') is 'undefined' then @save() else @fetch()
    @fetchRelated()

class $.GirlView extends Marionette.ItemView
  tagName: 'tr'
  template: (data)-> '<td>'+data.name+' -- '+data.age+'<button>Love</button></td>'
  initialize: ->
    @listenTo @model,'change',@render

  events:
    'click button': 'sayLove'

  sayLove : -> log 'I Love YOU!'

class $.GirlsView extends Marionette.ItemView
  template: (data)->
    '<table>
        <thead><tr><th>My Gals</th></tr></thead>
        <tbody></tbody>
        <tfoot><tr><td>I Love Them!</td></tr></tfoot>
      </table>'
  initialize: (options)->
    @models = @model.get('gals').models
    @list = []
    self = @
    _.each @models,(girl)-> self.list.push new $.GirlView {model:girl}

  events:
    'click th': 'hello'
  render: ->
    @$el.html(@template {})
    self = @
    _.each @list,(girl)->
      girl.delegateEvents()
      self.$('tbody').append girl.render().$el

  hello: -> log 'hello'

gal1 = new $.Girl {name:'gal1',age:'22',id:'gal-1'}
gal2 = new $.Girl {name:'gal2',age:'19',id:'gal-2'}
gals = new $.Girls {title:'maGals',id:'gals-1',gals:['gal-1','gal-2']}

gv = new $.GirlsView {model:gals}
gv.render()
$('body').append gv.$el.html()

私にとってはちょっとしたハローワールドです。イベントが機能するようにネストされた itemViews を実装する方法や、このスニペットに関するその他のアイデアを歓迎します。

4

1 に答える 1