title: How do I clear out an array's contents and replace with new contents of nested collection?
body: <p>I have a Project model that has a nested collection of ProjectSlides. The project slides are images that I would like (to iterate over) to show which are specific to the particular project that was clicked on.</p>
  
  <p>I can click on the project name in the project list and it shows the images, iterating through each one properly. If I click on another project name, I expect the array holding the first project's images (project slides) to clear out and be replaced with the project slide images of the new project I clicked on. However, the images belonging to the project slides of the first project do clear out, and the second project's project slide images are appended to the array.</p>
  
  <h1>Question</h1>
  
  <p>How do I get the array to clear out its contents when I click on another project and have the array populate with the new project's project slide images?</p>
  
  <h1>In my projects controller I have the following code:</h1>
  
  <p>Displays the list of projects:</p>
  
  <pre><code>showProjectList: (projects) -&gt;
    projectListView = @getProjectListView projects
    Demo.AboutApp.Show.on "project-name:link:clicked", (project) =&gt;
      console.log project
      @showProject project # passes project model that was clicked on from another view
  
    @projectsLayout.projectListRegion.show projectListView
  </code></pre>
  
  <p>Get specific  Project that was clicked on:</p>
  
  <pre><code>showProject: (project) -&gt;
    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 = -&gt;
      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 &gt;= len
      return
  
    setInterval callback, 5000
  
    slideView = @getSlidesView slides
    @projectsLayout.projectSlidesRegion.show slideView
  </code></pre>
  
  <h1>View Code:</h1>
  
  <pre><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" : -&gt; 
        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: -&gt;
       console.log "ProjectSlideList View initialized"
       console.log this
  
     modelEvents:
       "add" : "render"
       "change" : "render"
  </code></pre>
  
  <h1>Model &amp; Collection:</h1>
  
  <pre><code>class Entities.Project extends Backbone.Model
    url: -&gt; Routes.project_path(id)
  
  class Entities.ProjectsCollection extends Backbone.Collection
    model: Entities.Project
    url: -&gt; Routes.projects_path()
  </code></pre>
  
  <h1>5/22/13 Final code in controller:</h1>
  
  <pre><code>showProjectList: (projects) -&gt;
    projectListView = @getProjectListView projects
    Demo.AboutApp.Show.on "project-name:link:clicked", (project) =&gt;
      clearInterval @timer # &lt;-- this is important; gets rid of previous project
      @showProject project
  
    @projectsLayout.projectListRegion.show projectListView
  
    # Project id
  
  showProject: (project) -&gt;
    console.log project
    project_slides = project.get('project_slides')  
    newProjectView = @getProjectDetailsView project
    @projectsLayout.projectDetailsRegion.show newProjectView
    slideIndex = -1
    slides_length = project_slides.length
  
    getNextSlide = -&gt;
      console.log project
      console.log project_slides
      slideIndex++
      slide = project_slides[slideIndex]
      slideIndex = 0 if slideIndex &gt;= 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
  </code></pre>
  
  <p>I am using Rails on the backend and the rabl gem. This allows me to pass project_slides as a child collection to the parent project. In other words, project_slides is already an array of project_slide objects. I simply needed to iterate over them at an interval. </p>
  
  <pre><code>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
  </code></pre>
  
  <p>When I click on a new project, marionette js takes care of zombies and populates the correct data. No need to create another slides collection when one was being passed already. Man, I couldn't see the forest for the trees. </p>