setting active class on rendered model in collection view with backbone and marionette

Question

I have collection of talks in talks view with is a list of all models in this collection. In video region I am rendering active talk. When I am clicking on certain model from the list, the model is rendered in video view.

I would like to add class "active" on an element form the list to indicated what model is currently rendered.

the views looks like that: (video-region renders attributes of active talk, talks-region renders list of talks in the collection)

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

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

How can i set class active on talk in talks-region witch is currently rendered.

here is my views controller: (commented setActive function doesn't work)

@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

Billy Chan Billy Chan · Accepted Answer · 2014-03-16T18:05:42

To manage active item, you need to set it highlight when clicked, and remove its highlight when other item clicked.

To do so, one simple way is to ask collection to hold an instance of current active item.

You can do it when controller got such event:

@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()

setting active class on rendered model in collection view with backbone and marionette

2 Answers