Question

Explanation on these two images

The code

showUserProfile: (user_data)->
    console.log "Routers.AppRouter showUserProfile()", user_data
    window.user_profile = user_data

    playlists_both_people = user_profile['playlists']

    my_profile['playlists'].forEach (pl)-> playlists_both_people.push(pl)

    @playlists = new Playlists.Collections.PlaylistsCollection( playlists_both_people )

    $("#app").html( new Playlists.Views.User.ShowView(user_data).render().el )
    @ok()

Answer 1

Now that everyone has finished beating you up, I’ll be nice and show you what you’re doing wrong.

You have a simple referencing problem. You start out with the user_data object being passed to your function. Then you make another reference to what user_data points at here:

window.user_profile = user_data

Now your data looks like this:

window.user_profile ->-+
                       |
                       +->- {playlists: [ ], ...}
                       |
user_data ----------->-+

Then you make another reference to user_data.playlists here:

playlists_both_people = user_profile['playlists']

And now you have this on your hands:

window.user_profile ->-+
                       |
                       +->- {playlists: [ ], ...}
                       |      ^
user_data ----------->-+      |
                              |
playlists_both_people --->----+

And then you push a bunch of things onto the playlists_both_people array and wonder why it changed user_data.playlists as well. The diagram tells you why: you never made a copy of anything, you’re just referencing the same piece of data through multiple variables.

You’re using Backbone so you have Underscore, perhaps _.clone can help you:

playlists_both_people = _(user_profile['playlists']).clone()

That will give you a (shallow) copy of user_profile.playlists (which is the same as user_data.playlists at this point) in playlists_both_people and the next forEach won’t change anything in user_data.

Note that you still might have a double reference problem with window.user_profile. You can’t use just one _.clone to fix this possible problem though, you’d have to clone each member separately since _.clone only does shallow copies. However, you probably have jQuery around and $.extend supports deep copying so that might be an option.

I’d also recommend against putting things directly in window. You’d be better off setting up a namespace for your application, say window.app, and then use that namespace:

window.app.user_profile = ...