backbone.js - How do I send a model that was clicked on within a ItemView to another ItemView that is on the same page? -

i have collection of tools displayed compositeview. each of rendered items in collection itemview. name of region holds these called toolnameregion.

i have region named tooldetailsregion in page , has supposed render attributes of clicked tool in toolnameregion.

here view:

@tools.module "aboutapp.show", (show, app, backbone, marionette, $, _) ->    class show.layout extends backbone.marionette.layout     template: jst['backbone/apps/about/templates/about']      regions:       toolnameregion:  "#tool-name"       tooldetailsregion: "#tool-details"    class show.tool extends backbone.marionette.itemview     template: jst['backbone/apps/about/templates/_tool']     tagname: "li"      events:       "click a.tool-link" : ->          @trigger "tool-name:link:clicked", @model # how hell pass show.tooldetail class?         console.log @model # shows model attributes clicked    class show.tools extends backbone.marionette.compositeview     template: jst['backbone/apps/about/templates/tools']     itemview: show.tool     itemviewcontainer: "ul"      triggers:       "click .tool-link" : "tool:link:clicked"    class show.tooldetail extends backbone.marionette.itemview     template: jst['backbone/apps/about/templates/tool_details']     itemview: show.tool      onshow: -> console.log "onshow"     onclose: -> console.log "onclose" 

here controller:

@tools "aboutapp.show", (show, app, backbone, marionette, $, _) ->    show.controller =      showabout: ->       tools = app.request "get:tools"       @aboutlayout = @getaboutlayout()        @aboutlayout.on "show", =>         @showtools tools         @showinitialtool tools        app.mainregion.show @aboutlayout      showtools: (tools) ->       toolsview = @gettoolsview tools          console.log toolsview        toolsview.on "tool:link:clicked", (tool) =>         console.log "model: #{tool}"         tool = @getinitialtoolview tool         @aboutlayout.tooldetailsregion.show tool      @aboutlayout.toolnameregion.show toolsview     gettoolsview: (tools) ->     new show.tools       collection: tools    showinitialtool: (tools) ->     initial_tool = tools.at(1)      toolview = @getinitialtoolview initial_tool     @aboutlayout.tooldetailsregion.show toolview    gettooldetailsview:  ->     app.request "tool:detail:view"    tooldetailsregion: ->     tooldetailview = @getinitialtoolview      @about.tooldetailsregion.show tooldetailview    getinitialtoolview: (tool) ->     new show.tooldetail       model: tool    getaboutlayout: ->     new show.layout 

how pass in @model (model clicked on) controller @model can passed view class show.tooldetail tooldetailsregion can updated dynamically?

here's entities (resources):

@tools.module "entities", (entities, app, backbone, marionette, $, _) ->    class entities.tool extends backbone.model    class entities.toolcollection extends backbone.collection     model: entities.tool     url: -> routes.tools_path()    api =      settools: (tools) ->       new entities.toolcollection (tools)      gettoolentities: ->       tools = new entities.toolcollection()       tools.fetch         reset: true       tools      app.reqres.sethandler "set:tools", (tools) ->       api.settools tools      app.reqres.sethandler "tool:entities", ->       api.gettoolentities() 

thanks response @david sulc. still not passing model through. maybe i'm not formatting correctly?

the way grab model view:

class show.tool extends backbone.marionette.itemview   template: jst['backbone/apps/about/templates/_tool']   tagname: "li"    events:     "click a.tool-link" : ->        app.request "get:new:tool", @model       console.log @model 

in controller:

 showtools: (tools) ->     toolsview = @gettoolsview tools        console.log toolsview      toolsview.on "tool:link:clicked", (tool) =>       console.log "model retrieved click: #{tool}" # comes undefined; how obtain?       tool = app.request "get:new:tool" # path, since tool undefined, won't work?        new_tool = @getinitialtoolview tool       @aboutlayout.tooldetailsregion.show new_tool    @aboutlayout.toolnameregion.show toolsview 

thanks @david sulc showing me way!

in controller:

  showtools: (tools) ->     toolsview = @gettoolsview tools        console.log toolsview      tools.aboutapp.show.on "tool-name:link:clicked", (tool) =>       console.log tool.get('name')       new_tool = @getinitialtoolview tool       @aboutlayout.tooldetailsregion.show new_tool  

in view code:

  class show.tool extends backbone.marionette.itemview     template: jst['backbone/apps/about/templates/_tool']     tagname: "li"      events:       "click a.tool-link" : ->          tools.aboutapp.show.trigger "tool-name:link:clicked", @model         console.log @model    class show.tooldetail extends backbone.marionette.itemview     template: jst['backbone/apps/about/templates/tool_details']     itemview: show.tool     tools.aboutapp.show.on "tool-name:link:clicked", (tool) =>       console.log tool      onshow: -> console.log "onshow"     onclose: -> console.log "onclose" 

you can use events, scoped current module. trigger event in view with

tools.aboutapp.show.trigger "my:event", @model 

then, in controller can listen event , update other view:

tools.aboutapp.show.on "my:event", (model) ->     console.log model 

the syntax you've used in show.tools view limited in scope item view (and extent collection view). since need pass data between different views, need widen scope, , therefore use call above: trigger , listen events in tools.aboutapp.show scope.

in view:

events:   "click a.tool-link" : ->      tools.aboutapp.show.trigger "tool-name:link:clicked", @model 

and in detail view:

tools.aboutapp.show.on "tool-name:link:clicked", (tool) =>   console.log "model retrieved click: #{tool}" 

notice need use same scope , same trigger name.