2014-03-18 28 views
0

我在會談中查看會話的集合是此集合中所有模型的列表。在視頻區域,我正在進行積極的談話。當我點擊列表中的特定模型時,模型將呈現在視頻視圖中。在骨幹區域中向元素添加類

我在列表中的一個元素上添加了一個「活動」類,以指示當前呈現的模型,但只在點擊列表時觸發,而不是在刷新頁面時觸發。如何在渲染時添加類?

的意見看起來像這樣:(視頻區域呈現活躍的談話屬性,會談區域呈現會談列表集合中)

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

回答

0

這聽起來像你需要添加一個標誌到你的模型來指示模型是否激活。然後當你渲染,你檢查,如果該標誌是在那裏你設置類在HTML中活躍

+0

我應該如何添加一個標誌? – lipenco

+0

將屬性添加到名爲isActive的談話模型 – lyoung