backbone.js - How do I clear out an array's contents and replace with new contents of nested collection? -

i have project model has nested collection of projectslides. project slides images (to iterate over) show specific particular project clicked on.

i can click on project name in project list , shows images, iterating through each 1 properly. if click on project name, expect array holding first project's images (project slides) clear out , replaced project slide images of new project clicked on. however, images belonging project slides of first project clear out, , second project's project slide images appended array.

question

how array clear out contents when click on project , have array populate new project's project slide images?

in projects controller have following code:

displays list of projects:

showprojectlist: (projects) ->   projectlistview = @getprojectlistview projects   demo.aboutapp.show.on "project-name:link:clicked", (project) =>     console.log project     @showproject project # passes project model clicked on view    @projectslayout.projectlistregion.show projectlistview 

get specific project clicked on:

showproject: (project) ->   console.log project   console.log project.get('project_slides')    newprojectview = @getprojectdetailsview project   @projectslayout.projectdetailsregion.show newprojectview   console.log slides   # when click on project name, how can check see if array exists?    # if array exists, set length 0 (to empty previous project's nested collection),    # , add nested collection project slides of other project project clicked on?    # there way scope array based on event? event create array, if 1 doesn't exist,    # or if exist, empty contents , replace? i'm lost.   project_slides = project.get('project_slides')  # shows project_slides   slides = (slide slide in project_slides) # creates slides array, placing each member of project slides nested collection in array.    console.log "slides: #{slides}"   = 0   len = slides.length    callback = ->     slide = slides[i] # gets current iteration of slides array     slideview = demo.projectsapp.show.controller.getslidesview slide # creates view     demo.projectsapp.show.controller.projectslayout.projectslidesregion.show slideview # appends view projectsslideregion              console.log slide     i++     = 0 if >= len     return    setinterval callback, 5000    slideview = @getslidesview slides   @projectslayout.projectslidesregion.show slideview 

view 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" : ->        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     modelevents:      "add" : "render"      "change" : "render" 

model & collection:

class entities.project extends backbone.model   url: -> routes.project_path(id)  class entities.projectscollection extends backbone.collection   model: entities.project   url: -> routes.projects_path() 

5/22/13 final code in controller:

showprojectlist: (projects) ->   projectlistview = @getprojectlistview projects   demo.aboutapp.show.on "project-name:link:clicked", (project) =>     clearinterval @timer # <-- 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 

i using rails on backend , rabl gem. allows me pass project_slides child collection parent project. in other words, project_slides array of project_slide objects. needed iterate on them @ interval.

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 

when click on new project, marionette js takes care of zombies , populates correct data. no need create slides collection when 1 being passed already. man, couldn't see forest trees.

i think should storing slides within collection. then, you'd have is

slides.reset(project_slides) 

using collection useful in marionette, since collectionview rerender when collection triggers "reset" event.

if want learn more using collection views, take @ pages 21-31 in http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf (full disclosure: i'm author)