Is there are more elegant way of getting arbitrary javascript objects by id, when checkboxes are marked? - knockout-2.0

Question

Wannt to give the user the possibility to select people via checkboxes in a list.
This sample works, but I would like to know, if you would do it the same way.
The main problem is, that javascript arbitrary objects cannot be compared against easily. So there must be a mapping.
Is this ok so? I don't want to create a custom-binding for this, where I could defined an Id field in the binding.
function Person(id, name, age) {
this.id = id;
this.name = name;
this.age = age;
}
function Party(id, name, persons) {
var self = this;
this.id = id;
this.name = name;
this.persons = ko.observableArray(persons);
this.persons_checked = ko.observableArray(); //<--- for the checkboxes
this.persons_checked.subscribe(function(newValue) {
var mapped = [];
mapped = $.map(newValue, function(id) {
return $.grep(listOfPeople, function(n) { return n.id == id; }); });
self.persons(mapped);
});
}
Complete Sample here: http://jsbin.com/ukipek/6/edit
Thank you

Answer 1

The simplest solution is to use knockoutjs 3.x and not 2.x, and it is magically done !
I've taken your example and modified it:
The HTML part:
<h1 data-bind="text: party.name"></h1>
<ul data-bind="foreach: people">
<li>
<input type="checkbox" data-bind="checkedValue: $data, checked: $root.party.persons_checked, attr: {value: id}">
<span data-bind="text:name"></span>
</li>
</ul>
And the JS part:
function Person(id, name, age) {
var self = this;
self.id = id;
self.name = name;
self.age = age;
}
function Party(id, name, persons) {
var self = this;
self.id = id;
self.name = name;
self.persons = ko.observableArray(persons);
self.persons_checked = ko.observableArray();
}
var listOfPeople = [
new Person(1, 'Fred', 25),
new Person(2, 'Joe', 60),
new Person(3, 'Sally', 43)];
var viewModel = function() {
var self = this;
this.party = new Party(1, "Weihnachtsfeier1", []);
this.people = ko.observableArray(listOfPeople);
};
ko.applyBindings(new viewModel());
No more mappings, knockoutjs handles everything alone :-)
You can have a look at this jsbin if you want : http://jsbin.com/sasuvuwabu/1/edit
Hope that helps !