Backbone model property getting updated on update of another property

Question

Here is my model:

var SendAlertsModel = Backbone.Model.extend({

            defaults: {
                customSubject: "",
                customNote: "",
                userList:[],
                alertUserList:[]
            }

        });

Inside view:

initialize: function(options) {
                var self= this;
                if(_.isUndefined(options)===false){
                    self.model= new SendAlertsModel();
                    self.loggedInUser = app.user;
                    self.model.set("userList",options.previousTabData.get("userList"));
                    self.model.set("alertUserList",options.previousTabData.get("userList"));
                    self.model.get("alertUserList").push(self.loggedInUser);
                }
            },

The issue which i am facing here is when i push the loggedInUser to alertUserList array, it automatically pushes the same loggedInUser to userList array.

Please give your suggestions on this.

Thanks

@nikoshr Could you please share the appropriate link ? Thanks — Yameen, Jan 29 '16 at 12:50
I closed your question as a duplicate of http://stackoverflow.com/a/34951015/1071630 but that was probably a mistake — nikoshr, Jan 29 '16 at 12:51
I don't think you need the var self = this; in this case as you haven't changed context within the if block. — Rupert, Jan 29 '16 at 12:58
Is it something because of reading the values from the same list in both the properties ? — Yameen, Jan 29 '16 at 13:07

score 2 · Answer 1 · answered Jan 29 '16 at 13:06

2

//create new alerts model
model = new SendAlertsModel();

//assign logged in user to local variable
loggedInUser = app.user;

//set the user list to be the user list from the previous tab data
model.set("userList",options.previousTabData.get("userList"));  

//set the alertUserList to be the previous tab user list by reference
model.set("alertUserList",options.previousTabData.get("userList"));

//push the logged in user into the alert user list
model.get("alertUserList").push(self.loggedInUser);

I think the issue occurs when you set the alertUserList to be the userList. As the user list is an object the alertUserList now contains a reference to the userList. It's not a copy. When you update the alertUserList you are actually updating the userList too.

Think of it like this:

var alertUserList = userList = {some object in memory};

In this line here you will want to create a copy rather:

model.set("alertUserList",options.previousTabData.get("userList"));

I'm not sure of what data type userList is, so it will depend on that. If you only need a shallow copy then you could do this using your underscore/lodash library (I assume that is what the "_" is):

model.set("alertUserList",_.clone(options.previousTabData.get("userList")));

answered Jan 29 '16 at 13:06

Rupert

1,629
11
23

userList is the list of users comming from the previous tab. And i need to show the loggedin user also. So i am creating a new property in model named alertUserList where i push the loggedinuser to show on grid. But i need the original userList also. So i am saving it in userList. And yes you are right, i am just creating the references here and thats why its updating the userList property also – Yameen Jan 29 '16 at 13:18
Perhaps create a property on your model called "userList" for the original list and put a clone in the "alertUserList" property. – Rupert Jan 29 '16 at 13:21
I did clone, but its adding lot of unwanted attributes. is there any way of keeping only the original attributes ? – Yameen Jan 29 '16 at 13:33
You could use the pick method from underscore: http://underscorejs.org/#pick and specify the attributes you want. – Rupert Jan 29 '16 at 13:41
Replacing `defaults` with a function would also be a good idea, including mutable values (such as arrays) in the defaults is just asking for trouble. – mu is too short Jan 29 '16 at 17:42

Backbone model property getting updated on update of another property

1 Answers1