Databases
StackOverflow2013
Postsdbo
POMaking an item in an array visible using knockout
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMaking an item in an array visible using knockout
    text
    copied!<p>I haven't been able to find a solution for this issue so far. I'm trying to populate a summary table when a quantity box has been changed in the main list. Here is my code as it sits currently:</p> <pre><code>&lt;div class="mainItems"&gt; &lt;ul data-bind="foreach: finalListItems"&gt; &lt;li&gt; &lt;input class="qty" data-bind="value: qty, valueUpdate: 'afterkeydown'" size="4"/&gt;&lt;label data-bind="text: item" &gt;&lt;/label&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div&gt; &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Item&lt;/th&gt; &lt;th&gt;Quantity&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody data-bind="foreach: finalListItems"&gt; &lt;tr&gt; &lt;td data-bind="text: item"&gt;&lt;/td&gt; &lt;td data-bind="text: qty"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; </code></pre> <p>And the ViewBox:</p> <pre><code>function sortedListItem(qty, listItemName) { var self = this; self.qty = ko.observable(qty); self.item = listItemName; } var trialViewModel = function(){ var self = this; self.availableListItems = [ {itemName: "Here is Item 1"}, {itemName: "Here is Item 2"}, {itemName: "Here is Item 3"}, {itemName: "Here is Item 4"}, {itemName: "Here is Item 5"} ]; self.finalListItems = ko.observableArray([ new sortedListItem(ko.observable.qty, self.availableListItems[0].itemName), new sortedListItem(ko.observable.qty, self.availableListItems[1].itemName), new sortedListItem(ko.observable.qty, self.availableListItems[2].itemName), new sortedListItem(ko.observable.qty, self.availableListItems[3].itemName), new sortedListItem(ko.observable.qty, self.availableListItems[4].itemName) ]); }; ko.applyBindings(trialViewModel()); </code></pre> <p>I have also included a JSFiddle here so you can see the idea of what I am going for:</p> <p><a href="http://jsfiddle.net/RYmf7/" rel="nofollow">http://jsfiddle.net/RYmf7/</a></p> <p>The issue is I only want the item visible in the summary if the qty box has been changed. I've haven't been able to tie a visibility binding to the individual item in the array and I haven't seen anything quite like this yet. Any suggestions?</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