Night observable array. Sharing multiple viewing models

Question

It turns out a little puzzle in which the observed array with a knockout is divided into several viewing models.

Basically, I have a layout as follows

Transport ... textbox fields, etc Selected Passengers: <!-- ko foreach: allPassengers --> <input type="checkbox" /> <!-- /ko --> <button>Add Transport</button> Holiday ... textbox fields, etc Selected Passengers: <!-- ko foreach: allPassengers --> <input type="checkbox" /> <!-- /ko --> <button>Add Holiday</button> 

Now the selected passengers for each section are generated from ONE observed array, the idea is that the passenger is deleted / changed, everything should automatically fall into place.

So something like this

 function page() { // in actuality this passengers array is a computed observable obtained from the passengers section which is not shown here. this.allPassengers = ko.observableArray([ { Id: 1, name = ko.observable('name'), checked = ko.observable(false) }, { . . ]); } function transport() { // pageVM is a page object this.allPassengers = pageVM.allPassengers; this.transportItems = ko.observableArray(); this.addTransport = function() { this.transportItems.push({ . . selectedPassengers: [...] . . }); }; } function holiday() { // pageVM is a page object this.allPassengers = pageVM.allPassengers; this.holidayItems = ko.observableArray(); this.addHoliday = function() { this.holidayItems.push({ . . selectedPassengers: [...] . . }); }; } 

However, when they click on add transport / vacation, I need a way to determine which checkboxes are checked so that I can add the selected passengers.

I tried to add the checked = ko.observable(false) property to the passenger element in parent.allPassengers , but the problem with this approach is that the checkbox is checked in the transport section, it will also check it in the holiday section, since it is using the same observable array.

Any ideas?

Edit:

violin example

Answer 1

Validated binding also works with observable arrays. Therefore, you can simply bind to $parent.selectedPassengers and specify the value attribute as the passenger identifier, for example:

 <input type="checkbox" data-bind="attr: { value: id }, checked: $parent.selectedPassengers" /> 

In each view model, you need to have an observable array of selectedPassengers , used to bind to the checkbox. And the add function should look like this:

 function transport(pageVM) { .... this.selectedPassengers = ko.observableArray([]); .... this.addTransport = function() { this.selectedItems.push({ .... selectedPassengers: this.selectedPassengers() }); }; }; 

Working script

Answer 2

You can use ko.computed to return the selected passengers ( and here is the fiddle ):

 var ViewModel = function () { this.allPassengers = ko.observableArray([ { name: 'John', selected: ko.observable(false) }, { name: 'Jane', selected: ko.observable(false) }, { name: 'Mark', selected: ko.observable(false) } ]); this.selectedPassengers = ko.computed(function () { return ko.utils.arrayFilter(this.allPassengers(), function (item) { return item.selected(); }); }, this); };