백본 영역의 요소에 클래스 추가

Question

나는이 컬렉션의 모든 모델 목록과 대화보기에서 대화 모음을 가지고 있습니다. 비디오 영역에서 나는 능동적 인 말을하고있다. 목록에서 특정 모델을 클릭하면 모델이 비디오보기로 렌더링됩니다.

어떤 모델이 현재 렌더링 되었는가를 나타 내기 위해 목록에서 요소에 "활성"클래스를 추가했지만 페이지를 새로 고칠 때가 아니라 목록을 클릭 할 때만 트리거됩니다. 렌더링하는 동안 클래스를 추가하려면 어떻게해야합니까?

견해

은 다음과 같습니다

여기

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

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

내보기 컨트롤러 (비디오 영역을 활성 이야기의 특성을 렌더링, 회담-지역은 컬렉션에 회담의 목록을 렌더링) : (콘솔 로그는 아니다 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 

그리고 내가 트리거 wnat 내 전망, "응용 프로그램을 : 쇼"렌더링에를

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

Answer 1

모델이 활성 상태인지 여부를 나타 내기 위해 모델에 플래그를 추가해야하는 것처럼 들립니다. 그런 다음 렌더링 할 때 깃발이 있는지 확인하고 html에서 클래스를 활성화로 설정하십시오.