Question

我在会谈视图中收集了会话，其中列出了此集合中的所有模型。在视频领域，我正在进行积极的谈话。当我从列表中单击某个模型时，模型将在视频视图中呈现。

我想添加课程＆＃34;活跃＆＃34;在元素上形成列表以指示当前呈现的模型。

视图看起来像这样:(视频区域呈现活动谈话的属性，会话区域呈现集合中的会话列表）

 <div class="col-md-10  columns">
     <div id="video-region"></div>
  </div>

  <div class="col-md-2  columns">
    <div id="talks-region"></div>
  </div>

如何在会话区域中设置课堂活动，目前正在进行会话。

这是我的观点控制器：（评论的setActive函数不起作用）

@Demo.module "TalkApp.Show", (Show, App, Backbone, Marionette, $, _) ->

      class Show.Controller extends App.Controllers.Base

    initialize: (options) ->
        { id, talk_id, talk } = options
        talk or= App.request "talk:entity", id, talk_id
        window.id = id
        talks = App.request "talk:entities", id

        App.execute "when:fetched", talk, =>

          @layout = @getLayoutView talk

          @listenTo @layout, "show", =>
            @videoRegion talk
            # @setActive talk, ev
            @talksRegion talks

          @show @layout

    # setActive: (talk, ev) ->
    #   $target = $(ev.target)
    #   console.log $target
    #   $target.addClass('active')

    talksRegion: (talks) ->
      talksView = @getTalksView talks

      @listenTo talksView, "childview:talk:single:render", (child, args) ->
        App.vent.trigger "talk:single:render", args.model
        console.log args.model
        @videoRegion args.model
        # @setActive args.mode

      @layout.talksRegion.show talksView


    videoRegion: (talk) ->
      videoView = @getVideoView talk
      @layout.videoRegion.show videoView
      video = talk.get("video_url")

      pop = Popcorn.youtube( "#youtube", "#{video}" )


    getTalksView: (talks) ->
      new Show.Talks
        collection: talks


    getVideoView: (talk) ->
      new Show.Video
        model: talk


    getLayoutView: (talk) ->
      new Show.Layout
        model: talk

Answer 1

还有一个插件可以帮助解决这个问题，因为它是一种非常常见的模式。

https://github.com/brian-mann/Backbone.Chooser

Answer 2

要管理活动项目，您需要在单击时将其设置为高亮显示，并在单击其他项目时删除其突出显示。

为此，一种简单的方法是让集合保存当前活动项的实例。

你可以在控制器得到这样的事件时这样做：

@listenTo talksView, "childview:talk:single:render", (childView, args) ->
  @manageHightlight(childView)
  # ...other things to do

manageHighlight: (childView) ->
  @currentActiveView.removeHighlight() if @currentActiveView
  @currentActiveView = childView
  @currentActiveView.highlight()

# For TaskView
removeHighlight: ->
  @$el.removeClass('highlight')
  @render()

highlight: ->
  @$el.addClass('highlight')
  @render()

使用backbone和marionette在集合视图中的渲染模型上设置活动类

2 个答案: