Binding to a checkbox list won't work when page loads

Using the example provided here: http://knockoutjs.com/documentation/checked-binding.html combined with the answer here: Binding a list of objects to a list of checkboxes

I am trying to bind an observable array to a checkbox list. Everything works when you start fresh. Clicking a checkbox will add the item to the selected items array, ahd submitting the page w/ajax it comes over fine. But if you try to load existing data, it doesn't work.

Please see this example: https://jsfiddle.net/fwg3efv6/

If you set the binding on the checkbox input with checkedValue: $data as suggest in the KO example. And then try and supply selectedPeople on page load here:

selectedPeople: ko.observableArray([new Person(1, "Fred", 25)])

But if you set binding to checkingValue: id and populate model like so:

selectedPeople: ko.observableArray([1])

It starts checked no problem.

When binding a whole object, if you check that checkbox again, then selected people will now have 2 objects in it both with the same properties. If it works when starting fresh via unchecking and checking, why is trying to start by binding some values already checked not working?