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}"

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

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

1 个答案: