Assigning new model to viewmodel updates properties of wrong model

[RikSlendebroek]

I have a viewmodel wich I reuse with other models. Normally it works fine but I found a issue when updating the model within the viewmodel. The viewModel has a computed on Type, this computed changes indirectly another observable Operator. The problem is that when type is assigned a new model (new emmiter) it notifies its subscribers and thereby changes Operator, however Operator hasn't been updated to the new model yet causing it to change the old model.

Example js:

var exampleModel = Backbone.Model.extend({
  defaults: {
    'Name': "",
    'Type': 0,
    'Operator': 0
  }
});
var operatorCollection = [{
    Name: 'Gelijk =',
    Value: 1,
    Type: 0
  },
  {
    Name: 'Niet gelijk !',
    Value: 2,
    Type: 0
  },
  {
    Name: 'Gelijk =',
    Value: 1,
    Type: 1
  },
  {
    Name: 'Niet gelijk !',
    Value: 2,
    Type: 1
  },
  {
    Name: 'Vanaf excl. >',
    Value: 3,
    Type: 1
  },
  {
    Name: 'Vanaf >=',
    Value: 4,
    Type: 1
  },
  {
    Name: 'Tot <',
    Value: 5,
    Type: 1
  },
  {
    Name: 'T/m <=',
    Value: 6,
    Type: 1
  },
  {
    Name: 'NA',
    Value: 0,
    Type: 2
  }
];
var exampleViewModel = kb.ViewModel.extend({
  constructor: function(model) {
  var self = this;
    kb.ViewModel.apply(this);
    this.model(model);
    this.Operators = ko.observableArray(operatorCollection);
    this.filterOperators = ko.computed(function() {
      return ko.utils.arrayFilter(self.Operators(), function(op) {
        return op.Type == self.Type();
      });
    });
  }
});

var model1 = new exampleModel({
  Name: "1",
  Type: 1,
  Operator: 4
});
vm = new exampleViewModel(model1);
ko.applyBindings(vm, document.getElementById("somediv"));
console.log(vm.Operator()); // 4
console.log(model1.get("Operator"), " model1"); // 4 model1
var model2 = new exampleModel({
  Name: "2",
  Type: 0,
  Operator: 1
});
vm.model(model2);
console.log(model1.get("Operator"), " model1"); // 1 model1

Example html:

<div id="somediv">
  <p data-bind="text: Name">

  </p>
  <select data-bind="options: filterOperators, optionsText: 'Name', optionsValue: 'Value', value: Operator">
</select>
</div>

For now I solved it by changing the order of defaults in the Backbone model, but this is not a permanent solution. I was wondering if there is a better method for this? I think it should wait to notify the subscribers until all observables are set to the new model.