在骨干区域中向元素添加类

时间:2014-03-18 17:49:51

标签: javascript backbone.js marionette

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

我添加了一个课程" active"在一个元素上形成列表以指示当前呈现的模型,但它仅在单击列表时触发,而不是在刷新页面时触发。如何在渲染时添加类?

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

 <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

我的观点,我想要触发&#34; app:show&#34;在渲染

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

1 个答案:

答案 0 :(得分:0)

听起来您需要在模型中添加一个标志,以指示模型是否处于活动状态。然后在渲染时,检查并且标志是否存在,您在html中将类设置为活动