I currently have a somewhat complex data model to work with. I have a group of dynamically-created computed observables
that have to subscribe to a group of dynamically-created observables
(ie, if any one of those observables
changes, the whole computed
has to refresh).
I'm scratching my head trying to solve this. The only knockout-ish solution I came up with was to make an observable group
and a computed group
(extending the respective observable
). The computed group
could subscribe to an observable
, and it would emit the observables
events to its enclosed computeds
. Likewise, an observable
contained in an observable group
would emit its events to the parent, which would pass that on to its subscribers.
I don't think that's a very good idea, honestly, but it seems like it could work.
Is there a way to do this presently?
As an example, say I have a dynamic number of "investors" with a dynamic number of "priorities" attached to them, and a dynamic number "users" that calculate how many times they appear in any investor priority, so we have something like this:
The above image represents the users, and how many times they appear in the investor list. These would be the computed observables.
The above image represents the investors. These are the observables that are subscribed to.
There is some extra information that goes into creating these fields, so many of them are created like this (this applies to both computeds and normal observables):
Here is the markup behind the investor rows.
<!-- ko foreach: new Array($root.MaxPriority()) -->
<td>
<select data-bind="options: $root.Users,
optionsText: 'FirstAndLastName',
optionsValue: 'UserID',
value: $root.getUserAtPosition($parent.InvestorID, $index() + 1)
"></select>
</td>
<!-- /ko -->
This is the function that creates the observable for the user (on the select box).
self.getUserAtPosition = function (invId, pos) {
var uniqueSelectInst = ko.observable(function () {
return 0;
});
return uniqueSelectInst;
};
Here is the markup that creates the users on the left.
<!-- ko foreach: Users.slice(1) -->
<tr>
<td data-bind="text: FirstAndLastName"></td>
<td><input type="checkbox" /></td>
<td data-bind="text: $parent.countAppearancesForUser"></td>
</tr>
<!-- /ko -->
And here is the corresponding JS.
self.countAppearancesForUser = function (priority) {
return ko.computed(function () {
//code
});
};
In fiddle form: http://jsfiddle.net/8U9M4/3/
I don't know how good this approach is, and I'm open to anything that would make it better.