adding class to element in backbone region

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 added a class "active" on an element form the list to indicated what model is currently rendered, but it triggers only on click on a list, not when I refresh the page. How can I add class while rendering?

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>

here is my views controller: (and console log is not trrigered)

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

      class Show.Controller extends App.Controllers.Application

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

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

          @layout = @getLayoutView talk

          @listenTo @layout, "show", =>
            @titleRegion talk
            @videoRegion talk
            @nextRegion talk
            @talksRegion talks, talk

          @show @layout, loading: true



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

          @listenTo talksView, "app:start", ->
            console.log "rendered"
            # $(".talk#{talk.id}").addClass('highlight')
            # App.vent.trigger "talk:single:render", args.model




          @listenTo talksView, "childview:talk:single:render", (child, args) ->
            App.vent.trigger "talk:single:render", args.model
            @titleRegion args.model
            @videoRegion args.model
            childview = child.$el
            @manageHighlight(childview)

          @layout.talksRegion.show talksView


        titleRegion: (talk) ->
          titleView = @getTitleView talk
          @layout.titleRegion.show titleView

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

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


        childElementsFadeIn: ->
          console.log "triggered"


        manageHighlight: (childView) ->
          $("li").removeClass('highlight')
          childView.addClass('highlight')


        nextRegion: (talk) ->
          nextView = @getNextView talk
          @layout.nextRegion.show nextView



        getNextView: (talk) ->
          new Show.Next
            model: talk

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


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


        getTitleView: (talk) ->
          new Show.Title
            model: talk

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

And my views, where i wnat to trigger the "app:show" on render

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

  class Show.Layout extends App.Views.Layout
    template: "talk/show/show_layout"

    regions:
      titleRegion:  "#title-region"
      videoRegion:  "#video-region"
      talksRegion:  "#talks-region"
      nextRegion:  "#next-region"

  class Show.Title extends App.Views.ItemView
    template: "talk/show/_title"


  class Show.Video extends App.Views.ItemView
    template: "talk/show/_video"

  class Show.Next extends App.Views.ItemView
    template: "talk/show/_next"

  class Show.Talk extends App.Views.ItemView
    template: "talk/show/_talk"
    tagName: "li"

    triggers:
      "click"      : "talk:single:render"

    onRender: ->
      App.vent.trigger 'app:show'



  class Show.Talks extends App.Views.CompositeView
    template: "talk/show/_talks"
    itemView: Show.Talk
    itemViewContainer: "ul"

lyoung lyoung · Accepted Answer · 2014-03-18T18:14:08

It sounds like you need to add a flag to your model to indicate whether the model is active or not. Then when you render, you check and if the flag is there you set the class to active in the html

adding class to element in backbone region

1 Answers