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

Question

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

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

这是 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 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"

这是 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

如何将@model(被点击的模型)传递给 Controller ​​，以便@model 可以传递给 View 类 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 的回复。它仍然没有通过模型。也许我没有正确格式化它？

我从 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

在 Controller 中:

 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 为我指路!

在 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 

在 View 代码中:

  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

您可以使用事件，范围限定为您当前的模块。在您的 View 中触发事件

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

然后，在您的 Controller 中，您可以监听该事件并更新您的其他 View :

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

您在 Show.Tools View 中使用的语法将限制在项目 View (以及在一定程度上它的 Collection View )的范围内。由于需要在不同 View 之间传递数据，我们需要扩大范围，因此使用上面的调用:在Tools.AboutApp.Show范围内触发和监听事件。

在你看来:

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

在您的详细 View 中:

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

注意我们需要使用相同的作用域和相同的触发器名称。