2

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

1 に答える 1

7

現在のモジュールをスコープとするイベントを使用できます。ビューでイベントをトリガーします

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

同じスコープと同じトリガー名を使用する必要があることに注意してください。

于 2013-05-10T13:40:22.573 に答える