3

Consider the following two examples of mapping an object from JSON and assigning it into an observable:

The first example enables the user to change the input value, save the current value, and load the saved data anytime:

var personAsJson = "";
var handlerVM = function () {
  var self = this;
  self.person = ko.observable();
  self.init = function () {
    self.person(new personVM("john", 1));
  }
  self.changeName = function () {
    var currentName = "";
    var vowels = "aieou";
    var consonants = "bcdfghjklmnpqrstvwxyz";
    for (var i = 0; i < 2; i++) {
      currentName += vowels.charAt(Math.floor(Math.random() * vowels.length));
      currentName += consonants.charAt(Math.floor(Math.random() * consonants.length));
    }
    self.person().name(currentName);
  }
  self.save = function () {
    personAsJson = ko.toJSON(self.person);
    console.log(personAsJson);
  }
  self.load = function () {
    loadedPerson = ko.mapping.fromJSON(personAsJson);
    self.person(loadedPerson);
  }
  self.log = function () {
    console.log(ko.toJSON(self.person));
  }
}
var personVM = function (name, id) {
  var self = this;
  self.name = ko.observable(name);
  self.id = ko.observable(id);
}

var handler = new handlerVM();
handler.init();
ko.applyBindings(handler);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://rawgit.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js
"></script>
<div data-bind="with: person">
  <input data-bind="value: name" />
</div>
<div>
  <button data-bind="text: 'change name', click: changeName" />
  <button data-bind="text: 'save', click: save" />
  <button data-bind="text: 'load', click: load" />
  <button data-bind="text: 'log current person', click: log" />
</div>

The second example does the same thing - only with a select. However, the load functionality doesn't work:

var currentPersonAsJson = "";
var handlerVM = function () {
  var self = this;
  self.persons = ko.observableArray([
      new personVM("john", 1),
      new personVM("paul", 2),
      new personVM("viki", 3),		
  ]); 
  self.currentPerson = ko.observable();     
  self.save = function () {
    currentPersonAsJson = ko.toJSON(self.currentPerson);
    console.log(currentPersonAsJson);
  }
  self.load = function () {
    loadedPerson = ko.mapping.fromJSON(currentPersonAsJson);
    self.currentPerson(loadedPerson);
  }
  self.log = function () {
    console.log(ko.toJSON(self.currentPerson));
  }
}
var personVM = function (name, id) {
  var self = this;
  self.name = ko.observable(name);
  self.id = ko.observable(id);
}

var handler = new handlerVM();
ko.applyBindings(handler);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://rawgit.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js
"></script>
<div>
  <div>
     <select data-bind="options: persons,
                        optionsText: 'name',
                        optionsCaption: 'choose a person',
                        value: currentPerson"
     >
     </select>
  </div>
  <div>
     <button data-bind="text: 'save', click: save" />
     <button data-bind="text: 'load', click: load" />
     <button data-bind="text: 'log current person', click: log" />
  </div>
</div>

Why the second example doesn't work, and how can it be fixed?

1 Answer 1

2

When you change the <select>'s value through code, knockout searches for the new value in the list of options so it can update the UI.

When you set currentPerson (which is bound to the value) to anything that is not present in the persons array (which is bound to options), the UI will not update.

When you're saving a person, you're serializing to JSON. After reconstructing, you receive a new object that knockout cannot match with the previously bound options.

There are two possible solutions:

  1. Use the optionsValue binding so knockout uses the id property to match persons rather than an instance check, or
  2. Do a manual search for a previously created viewmodel when loading a person.

I've implemented solution 2 in the example below.

var currentPersonAsJson = null;

var handlerVM = function () {
  var self = this;
  self.persons = ko.observableArray([
      new PersonVM("john", 1),
      new PersonVM("paul", 2),
      new PersonVM("viki", 3),		
  ]); 
  self.currentPerson = ko.observable();     
  self.save = function () {
    currentPersonAsJson = ko.toJSON(self.currentPerson);
    console.log(currentPersonAsJson);
  }
  self.load = function () {
    var loadedPerson = ko.mapping.fromJSON(currentPersonAsJson);
    // loadedPerson is a new instance, so it won't match anything
    // inside self.persons
    // Let's do a manual lookup:
    
    var matchedVM = self.persons().find(
      p => p.id() === loadedPerson.id
    );
    
    if (matchedVM) {
      loadedPerson = matchedVM;
    }
    // Edge case: We've loaded something that we don't know:
    else {
      self.persons.push(loadedPerson);
    }
    
    self.currentPerson(loadedPerson);
  }
  self.log = function () {
    console.log(ko.toJSON(self.currentPerson));
  }
}
var PersonVM = function (name, id) {
  var self = this;
  self.name = ko.observable(name);
  self.id = ko.observable(id);
}

var handler = new handlerVM();
ko.applyBindings(handler);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://rawgit.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js
"></script>
<div>
  <div>
     <select data-bind="options: persons,
                        optionsText: 'name',
                        optionsCaption: 'choose a person',
                        value: currentPerson"
     >
     </select>
  </div>
  <div>
     <button data-bind="text: 'save', click: save" />
     <button data-bind="text: 'load', click: load" />
     <button data-bind="text: 'log current person', click: log" />
  </div>
</div>


Bonus edit: solution 1:

var currentPersonAsJson = null;

var handlerVM = function () {
  var self = this;
  self.persons = ko.observableArray([
      new PersonVM("john", 1),
      new PersonVM("paul", 2),
      new PersonVM("viki", 3),		
  ]); 
  self.currentPerson = ko.observable();     
  self.save = function () {
    currentPersonAsJson = ko.toJSON(self.currentPerson);
    console.log(currentPersonAsJson);
  }
  self.load = function () {
    self.currentPerson(currentPersonAsJson);
  }
  self.log = function () {
    console.log(ko.toJSON(self.currentPerson));
  }
}
var PersonVM = function (name, id) {
  var self = this;
  self.name = ko.observable(name);
  self.id = ko.observable(id);
}

var handler = new handlerVM();
ko.applyBindings(handler);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://rawgit.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js
"></script>
<div>
  <div>
     <select data-bind="options: persons,
                        optionsText: 'name',
                        optionsCaption: 'choose a person',
                        value: currentPerson,
                        optionsValue: 'id'"
     >
     </select>
  </div>
  <div>
     <button data-bind="text: 'save', click: save" />
     <button data-bind="text: 'load', click: load" />
     <button data-bind="text: 'log current person', click: log" />
  </div>
</div>

3
  • Can you please expand on solution 1, too? I tried adding optionsValue: 'id' to see what happens, but it didn't work.
    – OfirD
    May 8, 2018 at 7:18
  • 1
    I've added a snippet that demonstrates solution 1. loadedPerson now only contains an id, and we only have to save this id. If you're going with this approach, you might want to change your variable names to reflect the storing of ids rather than (serialized) viewmodels. May 8, 2018 at 11:25
  • Oh, simpler than I thought. Thanks!
    – OfirD
    May 8, 2018 at 11:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.