Knockout - observe array elements by property (not working)

by Jakub Jedryszek

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<div>      
  <ul data-bind="foreach: people">
    <li>
      First name:
      <input type="text" data-bind="value: firstName" />
      Last name:
      <input type="text" data-bind="value: lastName" />
    </li>
  </ul>      
  <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
</div>

JavaScript

function viewModel() {
    var that = this;
    
    that.people = ko.observableArray([]);
    
    that.people.push(ko.observable({
    		firstName: ko.observable("Jakub"),
        lastName: ko.observable("Jedryszek")
    }));
    
    that.people.push(ko.observable({
    		firstName: ko.observable("Steve"),
        lastName: ko.observable("Sanderson")
    }));
    
    that.people.push(ko.observable({
    		firstName: ko.observable("Elon"),
        lastName: ko.observable("Musk")
    }));
    
    that.people.subscribe(function (change) {
        console.log("change", change);
    });
    
    var mapping = {        
      key: function(data) {
        return ko.utils.unwrapObservable(data.firstName);
      }
    }
    var observedArray = ko.mapping.fromJS(people, mapping);
    
    observedArray.subscribe(function (change) {
        console.log("change (observed array)", change);
    });
}


ko.applyBindings(viewModel);