why collection.reset works like collection.add?

Question

I have a view with a Backbone collection. When I reset the collection through backbone.signalR hub, I expect to get a new collection which I pass through my hub but it just resets the collection and then works like calling collection.add on whatever was passed to it. So I get the 12 attributes in a model in my collection with first 6 null values and last 6 with current values.

My collection contains models with 6 attributes. I want to reset their values with the new 6 values. But I can not get through collection.reset().

Before reset my collection I have a object contain following 6 attributes:

  customerId: 2, 
  expectedTimeOfService: "10 min",
  id: 6,
  noOfWaiting: 13, 
  queueName: "Cash Deposit",
  smsCode: "1234",

After reset my collection I get a object contain following 12 attributes:

  CustomerId: null,
  ExpectedTimeOfService: null,
  Id: null,
  NoOfWaiting: null,
  QueueName: null,
  SmsCode: null,
  customerId: 2,
  expectedTimeOfService: "10 min",
  id: 6,
  noOfWaiting: 13,
  queueName: "Cash Deposit",
  smsCode: "1234",

So, I can not get what's the problem or how can i get out from this problem. All I want to get my 6 attribute value with updated value after collection reset.

Answer 1

JavaScript is case-sensitive, so CustomerId is not the same as customerId. When Backbone updates the model, it doesn't find a matching property, so it creates a new one.

You should fix the problem at the source and change the JSON keys returned by your service to lowerCamelCase.

If you can't for some reason change the service response, you could hack a conversion in Model.parse:

var Model = Backbone.Model.extend({
  parse: function (attrs) {
    var cleaned = {}
    _.each(attrs, function(val, key) {
      cleaned[key[0].toLowerCase() + key.slice(1)] = val;
    });
    return cleaned;
  }
});

And pass the option parse:true when reseting:

collection.reset(data, {parse:true});