查看代码
@Portfolio.module "ProjectsApp.Show", (Show, App, Backbone, Marionette, $, _) ->
class Show.ProjectsLayout extends Backbone.Marionette.Layout
template: JST["backbone/apps/projects/templates/list_layout"]
regions:
projectSlidesRegion : "#project-slides"
projectDetailsRegion : "#project-details"
projectListRegion : "#project-list"
initialize: ->
console.log "ProjectsLayout initialized"
class Show.Detail extends Backbone.Marionette.ItemView
template: JST["backbone/apps/projects/templates/_project_detail"]
modelEvents:
"change" : "render"
"add" : "render"
initialize: ->
console.log "Show.Detail initialized"
console.log this.collection
#Project Slides
class Show.ProjectSlide extends Backbone.Marionette.ItemView
template: JST["backbone/apps/projects/templates/_project_slide"]
tagName: "li"
initialize: ->
console.log "ProjectSlide View initialized"
console.log this.model.get('avatar')
class Show.ProjectSlides extends Backbone.Marionette.CompositeView #CollectionView
template: JST["backbone/apps/projects/templates/project_slides"]
itemView: Show.ProjectSlide
itemViewContainer: "ul"
initialize: ->
console.log "ProjectSlides View initialized"
collectionEvents:
"change": "render"
"add" : "render"
# Project Name List Code
class Show.ProjectName extends Backbone.Marionette.ItemView
template: JST["backbone/apps/projects/templates/_project_name_on_project_list"]
tagName: "li"
events:
"click a.project-link" : ->
Portfolio.AboutApp.Show.trigger "project-name:link:clicked", @model
triggers:
"click .project-link" : "project:link:clicked"
class Show.ProjectList extends Backbone.Marionette.CompositeView
template: JST["backbone/apps/projects/templates/project_list"]
tagName: "ul"
triggers:
"click .project-link" : "project:link:clicked"
控制器
@Portfolio.module "ProjectsApp.Show", (Show, App, Backbone, Marionette, $, _) ->
Show.Controller =
showProjects: ->
projects = Portfolio.projects
project = projects.at(0)
@projectsLayout = @getProjectLayoutView()
@projectsLayout.on "show", =>
@showDetails project
@showProjectSlides project
@showProjectList projects
App.mainRegion.show @projectsLayout
showDetails: (project) ->
projectDetailsView = @getProjectDetailsView project
@projectsLayout.projectDetailsRegion.show projectDetailsView
showProjectSlides: (project) ->
console.log "activated showProjectSlides"
projectSlides = project.get('project_slides')
projectSlidesCollection = new Portfolio.Entities.SlidesCollection projectSlides
slidesView = @getSlidesView projectSlidesCollection
@projectsLayout.projectSlidesRegion.show slidesView
showProjectList: (projects) ->
projectListView = @getProjectListView projects
Portfolio.AboutApp.Show.on "project-name:link:clicked", (project) =>
@showProject project
@projectsLayout.projectListRegion.show projectListView
# Show Specific Project
showProject: (project) ->
console.log project
# @showProjectSlides project
projectSlides = project.get('project_slides')
projectSlidesCollection = new Portfolio.Entities.SlidesCollection projectSlides
# console.log "showProject projectSlides: #{projectSlidesCollection}"
projectSlides = projectSlidesCollection.reset projectSlides
newProjectView = @getProjectDetailsView project
newProjectSlidesView = @getSlidesView projectSlides
@projectsLayout.projectDetailsRegion.show newProjectView
@projectsLayout.projectSlidesRegion.show newProjectSlidesView
# If I comment out the lines newProjectView = @getProjectDetailsView project and @projectsLayout.projectDetailsRegion.show newProjectView the projectSlidesRegion populates in the view with no issues, but no projectDetailsRegion updates
getProjectListView: (projects) ->
new Show.ProjectList
collection: projects
getSlidesView: (projectSlides) ->
# console.log "projectSlides: #{projectSlides}"
new Show.ProjectSlides
collection: projectSlides
getProjectLayoutView: ->
new Show.ProjectsLayout
# not sure if I need to explicitly pass the children objects to the view?
getProjectDetailsView: (project) ->
projectSlides = project.get('project_slides')
new Show.Detail
model: project
collection: new Portfolio.Entities.SlidesCollection projectSlides
模板：
list_layout.jst.eco:
<div id="project-details"></div>
<div id="project-list"></div>
_project_detail.jst.eco:
<img class="project-icon" src='assets/<%= @logo %>'>
<h3><%= @name %></h3>
<div id="tldr-wrapper">
<article id="project-problem">
<img src = "#" alt="problem pic">
<h3 class="project-header">problem</h3>
<p class="project-paragraph"><%= @problem %></p>
</article>
<article id="project-solution">
<img src = "#" alt="solution pic">
<h3 class="project-header">solution</h3>
<p class="project-paragraph"><%= @solution %></p>
</article>
</div>
<!-- how do I get this to show when I click on the new project from the project's list in the projectListRegion? -->
<div id="project-slides"></div>
<!-- end -->
<p><%= @detail %></p>
_project_slide.jst.eco
<img src='assets/<%= @avatar %>' />
<%= @caption %>
json对象：
{
"id":1,
"name":"project name",
"logo":"project-icon.png",
"problem":"The project's problem.",
"detail":"project's details",
"project_slides":
[
{
"id":1,
"project_id":1,
"avatar":"blue-disc.png",
"caption":"what a lovely disc"
},
{
"id":3,
"project_id":1,
"avatar":"desktop.png",
"caption":"yay computer"
}
]
}
当我第一次打开页面时，项目和项目的详细信息以及项目列表都会正确显示。当我从项目列表中单击项目名称时，我希望 projectDetailsRegion 和 projectSlidesRegion 将使用新项目的属性进行更新，并且项目列表保持不变。项目列表正常显示所有项目名称。然而，只有 projectDetailsRegion 被更新并且 projectSlides 是空白的。如何让 projectSlidesRegion 填充新模型的项目幻灯片？