如何将在ItemView中单击的模型发送到同一页面上的另一个ItemView？

Question

我有一个显示为CompositeView的工具集合.此集合中的每个呈现的项目都是ItemView.保存它们的区域的名称称为toolNameRegion.

我在该页面中有另一个名为toolDetailsRegion的区域,它应该在toolNameRegion中呈现所单击工具的属性.

这是观点:

@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 the hell do I pass this to the Show.ToolDetail class?
        console.log @model # shows the model attributes that was 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"

这是控制器:

@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

如何将@model(被点击的模型)传递给控制器​​,以便可以将@model传递给视图类Show.ToolDetail,以便可以动态更新toolDetailsRegion？

这是我的实体(资源):

@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()

感谢您的回复@David Sulc.它还没有通过模型.也许我没有正确格式化？

我从视图中获取模型的方式:

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

在控制器中:

 showTools: (tools) ->
    toolsView = @getToolsView tools   
    console.log toolsView

    toolsView.on "tool:link:clicked", (tool) =>
      console.log "model retrieved from click: #{tool}" # comes up undefined; how to obtain?
      tool = App.request "get:new:tool" # could this be the path, but since tool is undefined, won't work? 
      new_tool = @getInitialToolView tool
      @aboutLayout.toolDetailsRegion.show new_tool

  @aboutLayout.toolNameRegion.show toolsView

感谢@David Sulc为我指路!

在控制器中:

  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 

在视图代码中:

  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"

Answer 1

您可以使用作用于当前模块的事件.在您的视图中触发事件

Tools.AboutApp.Show.trigger "my:event", @model

然后,在您的控制器中,您可以侦听该事件并更新您的其他视图:

Tools.AboutApp.Show.on "my:event", (model) ->
    console.log model

您在Show.Tools视图中使用的语法将在范围内限制为项目视图(以及在某种程度上它的集合视图).由于您需要在不同视图之间传递数据,我们需要扩大范围,因此使用上面的调用:触发并侦听Tools.AboutApp.Show范围中的事件.

在你看来:

events:
  "click a.tool-link" : -> 
    Tools.AboutApp.Show.trigger "tool-name:link:clicked", @model

在您的详细视图中:

Tools.AboutApp.Show.on "tool-name:link:clicked", (tool) =>
  console.log "model retrieved from click: #{tool}"

请注意,我们需要使用相同的范围和相同的触发器名称.