如何將在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() 

感謝您的迴應@大衛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 

感謝@大衛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}" 

通知我們需要使用相同的範圍和相同的觸發器名稱。