title: Databind elements based on select value with KnockoutJS
body: <p>I want to do some clever binding on my nested KO array and I am really not sure how I would do it. Based on selection from the select, I want to get some elements based on the selection that has been made.  </p>
  
  <p>My ko obeservablearray, which looks like:</p>
  
  <pre><code>{
      "ProductName": "Product123",
      "RequiredComponents": "CAP 10% H/Vol",
      "StockCode": "142111411",
      "RequiredQtyByBom": 4,
      "QtyUnassignedInWarehouse": 0,
      "QtyAllocatedInWarehouse": 40,
      "PCBReference": "442C",
      "QtyOnOrder": 26,
      "Vendors": [],
      "RequireVendor": false
  },
  {
      "ProductName": "Product123",
      "RequiredComponents": "Screws",
      "StockCode": "Screws",
      "RequiredQtyByBom": 1,
      "QtyUnassignedInWarehouse": 0,
      "QtyAllocatedInWarehouse": 14,
      "PCBReference": "Screws",
      "QtyOnOrder": 26,
      "Vendors": [
                    {"VendorID": "3", 
                    "VendorName": "ABC Supplier",
                    "VendorMOQ": 50000,
                    "VendorItemPrice": 322},
                    {"VendorID": "4", 
                    "VendorName": "DEF Supplier",
                    "VendorMOQ": 4,
                    "VendorItemPrice": 120}
                 ],
      "RequireVendor": true
  },
  {
      "ProductName": "Product123",
      "RequiredComponents": "14141415",
      "StockCode": "151555231",
      "RequiredQtyByBom": 1,
      "QtyUnassignedInWarehouse": 0,
      "QtyAllocatedInWarehouse": 170,
      "PCBReference": "1414",
      "QtyOnOrder": 26,
      "Vendors": [],
      "RequireVendor": false
  }
  </code></pre>
  
  <p>I want to data-bind the Vendor MOQ, Price based on what vendor was selected. I pass the selectedVendorID back to my viewmodel.</p>
  
  <pre><code>   &lt;select data-bind="options: Vendors, optionsText: 'VendorName', optionsCaption: 'Choose a Vendor...', value: SelectedVendor" class="form-control"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>I want my Output to look like the following: </p>
  
  <pre><code>   &lt;table class="table table-bordered"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;td&gt;Stock Code&lt;/td&gt;
                              &lt;td&gt;Qty&lt;/td&gt;
                              &lt;td&gt;Vendor&lt;/td&gt;
                              &lt;td&gt;Price p/Unit&lt;/td&gt;
                              &lt;td&gt;MOQ&lt;/td&gt;
                              &lt;td&gt;Value&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody data-bind="foreach: CheckStock"&gt;
                          &lt;tr&gt;
                              &lt;td data-bind="text: StockCode"&gt;&lt;/td&gt;
                              &lt;td data-bind=""&gt;&lt;/td&gt;
                              &lt;td&gt;
                                  &lt;select data-bind="options: Vendors, optionsText: 'VendorName', optionsCaption: 'Choose a Vendor...', value: SelectedVendor" class="form-control"&gt;&lt;/select&gt;
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;input type="text" data-bind="value: Vendors().VendorPrice" /&gt;&lt;/td&gt;
                              &lt;td data-bind="text: Vendors().VendorMOQ"&gt;&lt;/td&gt;
                              &lt;td&gt;TODO CALC&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
  </code></pre>