1

ProjectSlides のネストされたコレクションを持つ Project モデルがあります。プロジェクトのスライドは、クリックされた特定のプロジェクトに固有の (反復して) 表示したい画像です。

プロジェクト リストでプロジェクト名をクリックすると、画像が表示され、各画像が適切に繰り返されます。別のプロジェクト名をクリックすると、最初のプロジェクトの画像 (プロジェクト スライド) を保持する配列が消去され、クリックした新しいプロジェクトのプロジェクト スライド画像に置き換えられることを期待します。ただし、最初のプロジェクトのプロジェクト スライドに属する画像は消去され、2 番目のプロジェクトのプロジェクト スライド画像が配列に追加されます。

質問

別のプロジェクトをクリックして配列に新しいプロジェクトのプロジェクト スライド イメージを入力したときに、配列の内容を消去するにはどうすればよいですか?

私のプロジェクトコントローラーには、次のコードがあります。

プロジェクトのリストを表示します:

showProjectList: (projects) ->
  projectListView = @getProjectListView projects
  Demo.AboutApp.Show.on "project-name:link:clicked", (project) =>
    console.log project
    @showProject project # passes project model that was clicked on from another view

  @projectsLayout.projectListRegion.show projectListView

クリックされた特定のプロジェクトを取得します。

showProject: (project) ->
  console.log project
  console.log project.get('project_slides')

  newProjectView = @getProjectDetailsView project
  @projectsLayout.projectDetailsRegion.show newProjectView
  console.log slides
  # When I click on another project name, how can I check to see if the array exists? 
  # If the array exists, then set its length to 0 (to empty the previous project's nested collection), 
  # and then add the nested collection project slides of the other project project I clicked on? 
  # Is there some way to scope an array based on an event? That event would create the array, if one doesn't exist, 
  # or if it does exist, empty its contents and replace? I'm so lost.
  project_slides = project.get('project_slides')  # shows project_slides
  slides = (slide for slide in project_slides) # creates the slides array, placing each member of the project slides nested collection in the array. 
  console.log "slides: #{slides}"
  i = 0
  len = slides.length

  callback = ->
    slide = slides[i] # gets the current iteration of the slides array
    slideView = Demo.ProjectsApp.Show.Controller.getSlidesView slide # creates the view
    Demo.ProjectsApp.Show.Controller.projectsLayout.projectSlidesRegion.show slideView # appends the view to the projectsSlideRegion         
    console.log slide
    i++
    i = 0 if i >= len
    return

  setInterval callback, 5000

  slideView = @getSlidesView slides
  @projectsLayout.projectSlidesRegion.show slideView

コードを表示:

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" : -> 
      Demo.AboutApp.Show.trigger "project-name:link:clicked", @model

  triggers:
    "click .project-link" : "project:link:clicked" 

 class Show.ProjectSlideList extends Backbone.Marionette.ItemView
   template: JST["backbone/apps/projects/templates/_project_slide"]
   tagName: "li"
   itemViewContainer: "project-slides"
   initialize: ->
     console.log "ProjectSlideList View initialized"
     console.log this

   modelEvents:
     "add" : "render"
     "change" : "render"

モデル & コレクション:

class Entities.Project extends Backbone.Model
  url: -> Routes.project_path(id)

class Entities.ProjectsCollection extends Backbone.Collection
  model: Entities.Project
  url: -> Routes.projects_path()

2013 年 5 月 22 日 コントローラの最終コード:

showProjectList: (projects) ->
  projectListView = @getProjectListView projects
  Demo.AboutApp.Show.on "project-name:link:clicked", (project) =>
    clearInterval @timer # <-- this is important; gets rid of previous project
    @showProject project

  @projectsLayout.projectListRegion.show projectListView

  # Project id

showProject: (project) ->
  console.log project
  project_slides = project.get('project_slides')  
  newProjectView = @getProjectDetailsView project
  @projectsLayout.projectDetailsRegion.show newProjectView
  slideIndex = -1
  slides_length = project_slides.length

  getNextSlide = ->
    console.log project
    console.log project_slides
    slideIndex++
    slide = project_slides[slideIndex]
    slideIndex = 0 if slideIndex >= slides_length
    console.log slide
    slideView = Demo.ProjectsApp.Show.Controller.getSlidesView slide
    Demo.ProjectsApp.Show.Controller.projectsLayout.projectSlidesRegion.show slideView
    return

  @timer = setInterval getNextSlide, 5000

バックエンドと rabl gem で Rails を使用しています。これにより、project_slides を子コレクションとして親プロジェクトに渡すことができます。つまり、project_slides はすでに project_slide オブジェクトの配列です。間隔を置いてそれらを反復処理する必要がありました。

Project {cid: "c32", attributes: Object, collection: ProjectsCollection, _changing: false, attributes: Object}
  detail: "first project details"
  id: 1
  logo: "project-icon.png"
  name: "First Project Name"
  problem: "The First Project's Problem Description"
  project_slides: Array[4]
    0: Object
      avatar: "first_image.png"
      caption: "first image's caption"
      id: 1
      project_id: 1
     __proto__: Object
    1: Object
    2: Object
    3: Object
      length: 4
  cid: "c32"
  collection: ProjectsCollection
  id: 1

新しいプロジェクトをクリックすると、marionette js がゾンビを処理し、正しいデータを入力します。スライド コレクションが既に渡されている場合、別のスライド コレクションを作成する必要はありません。木を見て森を見なかった。

4

2 に答える 2