Can't update dataSource.at(0) in viewModel

Question

In my viewModel i bind the user-property to userDataSource.at(0):

vm.set('userDs',userDataSource);
userDataSource.fetch(function(){
   vm.set('user', userDataSource.at(0));
});

This works fine as long as I just use the user data. But it doesn't work when i try to update the data.

vm.user.set('DisplayName','John Doe');
vm.userDs.sync();

This will not work. The problem is that vm.user now is updated, but the first element of vm.userDs is not changed. It seems like user is not a pointer to the first element in the userDs but rather a copy of the first element.

It works if I do it like this:

vm.userDs.at(0).set('DisplayName','John Doe');
vm.userDs.sync();

But that's a pretty ugly workaround. I would like the vm.user to be a pointer to the element in the userDs.

Answer 1

Turns out the reason why this wasn't working was because I changed the filter of the dataSource after defining it.

userDataSource = {
   ...
}
userDataSource.filter({/*filter config*/});

Moving the filter inside the userDataSource definition solved the problem:

userDataSource = {
   ...
   filter: {/*filter config*/}
}

I still don't completely understand why this makes such a huge difference, but at least I know how to work around it.