我在会谈视图中收集了会话,其中列出了此集合中的所有模型。在视频领域,我正在进行积极的谈话。当我从列表中单击某个模型时,模型将在视频视图中呈现。
我想添加课程"活跃"在元素上形成列表以指示当前呈现的模型。
视图看起来像这样:(视频区域呈现活动谈话的属性,会话区域呈现集合中的会话列表)
<div class="col-md-10 columns">
<div id="video-region"></div>
</div>
<div class="col-md-2 columns">
<div id="talks-region"></div>
</div>
如何在会话区域中设置课堂活动,目前正在进行会话。
这是我的观点控制器: (评论的setActive函数不起作用)
@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
答案 0 :(得分:2)
还有一个插件可以帮助解决这个问题,因为它是一种非常常见的模式。
答案 1 :(得分:1)
要管理活动项目,您需要在单击时将其设置为高亮显示,并在单击其他项目时删除其突出显示。
为此,一种简单的方法是让集合保存当前活动项的实例。
你可以在控制器得到这样的事件时这样做:
@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()