title: Durandal / Knockout nested dropdowns in table
body: <p>I am pretty new to Durandal and Knockout and I have run into a problem, I cannot figure out how to solve.</p>
  
  <p>I have a view with a table of creditcardlines. Each line have two nested dropdowns named Dimension1Key and Dimension2Key - and they are populated from GetDimensionMatrix ajax call.</p>
  
  <p>The creditlines foreach is populated in a for loop where the two dropdowns are defines as observable - and the data for Dimension2 is computed as a ko.compute.</p>
  
  <p>The table and the dropdowns are initially populated correctly with the correct value selected - but the nesting is not working correctly. No matter which of the Dimension1 drop downs I change, the reference of <em>self</em> is to the last row in the table - thus populating Dimension2 of the corresponding Dimension1 with value from the selected value of the last row.
  If the Dimension1 value is changed again nothing happens - the reference to the computed function is broken. But if I change the value of Dimension1 of the last row, the value of the earlier changed row Dimension2 changes - as if the reference for that is now connected to the last row.</p>
  
  <p>I am pretty sure the problem is the <em>self</em> in the loop in the view model - and the context it exists in - but I cannot get my head around the solution.</p>
  
  <p>Any help? :-)</p>
  
  <p>View:</p>
  
  <pre><code>&lt;section&gt;
      &lt;h2 data-bind="html:displayName"&gt;&lt;/h2&gt;
  
      &lt;table class="table"&gt;
          &lt;tbody data-bind="foreach: creditCardLines"&gt;
              &lt;tr&gt;
                  &lt;td class="date" data-bind="text: Date"&gt;&lt;/td&gt;
                  &lt;td class="date" data-bind="text: DocumentNo"&gt;&lt;/td&gt;
                  &lt;td data-bind="text: Description"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;select data-bind="options: $parent.dimension1List, optionsText: 'DimensionValue', optionsValue: 'DimensionKey', value: Dimension1Key"&gt;&lt;/select&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;select data-bind="options: dimension2List, optionsText: 'DimensionValue', optionsValue: 'DimensionKey', value: Dimension2Key"&gt;&lt;/select&gt; &lt;/td&gt;
                  &lt;td data-bind="text: Currency"&gt;&lt;/td&gt;
                  &lt;td data-bind="text: CurrencyAmount"&gt;&lt;/td&gt;
                  &lt;td data-bind="text: ExchangeRate"&gt;&lt;/td&gt;
                  &lt;td data-bind="text: AmountLCY"&gt;&lt;/td&gt;
                  &lt;td data-bind="text: Comment"&gt;&lt;/td&gt;
                  &lt;td data-bind="text: ApprovedEmployee"&gt;&lt;/td&gt;
                  &lt;td data-bind="text: Id"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>ViewModel:</p>
  
  <pre><code>define(function (require) {
  
  var submit = function () {
      this.displayName = 'Rejseafregning';
  
      this.creditCardLines = ko.observableArray();
  
      var me = this;
  
      this.activate = function () {
          return $.when(
                  $.get('/submit/GetCreditCardLines'),
                  $.get('/submit/GetDimensionMatrix')
                  )
              .then(function (creditCardLines, dimension1List) {
                  me.dimension1List = dimension1List[0].Data;
  
                  for (var i = 0; i &lt; creditCardLines[0].Data.length; i++) {
                      var self = creditCardLines[0].Data[i];
  
                      self.Dimension1Key = ko.observable(creditCardLines[0].Data[i].Dimension1Key);
                      self.Dimension2Key = ko.observable(creditCardLines[0].Data[i].Dimension2Key);
  
  
                      self.dimension2List = ko.computed(function () {
                          for (var j = 0; j &lt; me.dimension1List.length; j++) {
                              if (me.dimension1List[j].DimensionKey === self.Dimension1Key()) {
                                  return me.dimension1List[j].DimensionNext;
                              }
                          }
                      });
  
                      me.creditCardLines.push(self);
                  }
              });
          };
      };
      return submit;
  });
  </code></pre>