Databases
StackOverflow2013
Postsdbo
POknockout.js observable groups/computed groups
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POknockout.js observable groups/computed groups
    text
    copied!<p>I currently have a somewhat complex data model to work with. I have a group of dynamically-created <code>computed observables</code> that have to subscribe to a group of dynamically-created <code>observables</code> (ie, if any one of those <code>observables</code> changes, the whole <code>computed</code> has to refresh). </p> <p>I'm scratching my head trying to solve this. The only knockout-ish solution I came up with was to make an <code>observable group</code> and a <code>computed group</code> (extending the respective <code>observable</code>). The <code>computed group</code> could subscribe to an <code>observable</code>, and it would emit the <code>observables</code> events to its enclosed <code>computeds</code>. Likewise, an <code>observable</code> contained in an <code>observable group</code> would emit its events to the parent, which would pass that on to its subscribers.</p> <p>I don't think that's a very good idea, honestly, but it seems like it could work.</p> <p>Is there a way to do this presently?</p> <p>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:</p> <p><img src="https://i.stack.imgur.com/RJGE5.png" alt="These are the &quot;users&quot;"></p> <p>The above image represents the users, and how many times they appear in the investor list. These would be the computed observables.</p> <p><img src="https://i.stack.imgur.com/48cYs.png" alt="These are the &quot;investors&quot;"></p> <p>The above image represents the investors. These are the observables that are subscribed to.</p> <p>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):</p> <p>Here is the markup behind the investor rows.</p> <p> </p> <pre><code>&lt;!-- ko foreach: new Array($root.MaxPriority()) --&gt; &lt;td&gt; &lt;select data-bind="options: $root.Users, optionsText: 'FirstAndLastName', optionsValue: 'UserID', value: $root.getUserAtPosition($parent.InvestorID, $index() + 1) "&gt;&lt;/select&gt; &lt;/td&gt; &lt;!-- /ko --&gt; </code></pre> <p> </p> <p>This is the function that creates the observable for the user (on the select box).</p> <pre><code>self.getUserAtPosition = function (invId, pos) { var uniqueSelectInst = ko.observable(function () { return 0; }); return uniqueSelectInst; }; </code></pre> <p>Here is the markup that creates the users on the left.</p> <pre><code>&lt;!-- ko foreach: Users.slice(1) --&gt; &lt;tr&gt; &lt;td data-bind="text: FirstAndLastName"&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="checkbox" /&gt;&lt;/td&gt; &lt;td data-bind="text: $parent.countAppearancesForUser"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;!-- /ko --&gt; </code></pre> <p>And here is the corresponding JS.</p> <pre><code>self.countAppearancesForUser = function (priority) { return ko.computed(function () { //code }); }; </code></pre> <p>In fiddle form: <a href="http://jsfiddle.net/8U9M4/3/" rel="nofollow noreferrer">http://jsfiddle.net/8U9M4/3/</a></p> <p>I don't know how good this approach is, and I'm open to anything that would make it better.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload