title: Use knockout.js to data-bind javascript associative array across columns
body: <p>In C# DestopModel.cs, we have defined a DesktopViewModel, with a number of Designs.</p>
  
  <pre><code>public class DesktopViewModel
  {
          public Guid Id { get; set; }              
          public List&lt;DesktopDesignViewModel&gt; Designs { get; set; }
          // ...
  }
  </code></pre>
  
  <p>In our script.cshtml, we have converted the DesktopViewModel to a knockout view model vew ko.mapping.
  We also have a DesignScore function, that does some calculations and returns a set of scores 
  for each design across a number of categories.</p>
  
  <pre><code>@model DesktopViewModel
  &lt;script type="text/javascript"&gt;
  
      var Desktop = {
  
          ViewModel: null,
  
          Initialize: function () {
              // create knockout model
              Desktop.ViewModel = ko.mapping.fromJS(@Html.Raw(Json.Encode(Model)));
  
              // ...
  
              this.ViewModel.DesignScore = function (design) {
                  return ko.computed(function () {
  
                      var ClimateChange = 0;
                      var OceanAcidification = 0;
                      var OzoneDepletion = 0;
                      var BiogeochemicalCycles = 0;
                      var FreshWaterUse = 0;
                      var ChangeInLandUse = 0;
                      var BiodiversityLoss = 0;
                      var ChemicalPollution = 0;
                      var AtmosphericAerosols = 0;
  
                      // ... some calculations
  
                      return {
                          "ClimateChange": ClimateChange,
                          "OceanAcidification": OceanAcidification,
                          "OzoneDepletion": OzoneDepletion,
                          "BiogeochemicalCycles": BiogeochemicalCycles,
                          "FreshWaterUse": FreshWaterUse,
                          "ChangeInLandUse": ChangeInLandUse,
                          "BiodiversityLoss": BiodiversityLoss,
                          "ChemicalPollution": ChemicalPollution,
                          "AtmosphericAerosols": AtmosphericAerosols
                      };
                  });
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>In our view.cshtml, I am trying to display the results in a table.</p>
  
  <pre><code>                        des1    des2    des3
  =================================================
  Climate Change          1560    936     3588
  Ocean Acidification     1560    936     3588
  Ozone Depletion         0.1     0.2     0.3
  ...
  </code></pre>
  
  <p>Here is the way I am currently data-binding the results:</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class="col-md-2 text-center"&gt;&amp;nbsp;&lt;/th&gt;
              &lt;!-- ko foreach: Designs --&gt;
              &lt;th class="text-center"&gt;
                  &lt;h5 data-bind="text: Name"&gt;&lt;/h5&gt;
              &lt;/th&gt;
              &lt;!-- /ko --&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr class="top-border-row"&gt;
              &lt;td class="text-center"&gt;
                  &lt;h4&gt;Climate Change&lt;/h4&gt;
              &lt;/td&gt;
              &lt;!-- ko foreach: { data: $root.Designs, as: 'design' } --&gt;
              &lt;td class="text-center"&gt;                                                                
                  &lt;h4 data-bind="text: $root.DesignScore(design)().ClimateChange"&gt;&lt;/h4&gt;
              &lt;/td&gt;
              &lt;!-- /ko --&gt;                            
          &lt;/tr&gt;
  
          &lt;tr class="top-border-row"&gt;
              &lt;td class="text-center"&gt;
                  &lt;h4&gt;Ocean Acidification&lt;/h4&gt;
              &lt;/td&gt;
              &lt;!-- ko foreach: { data: $root.Designs, as: 'design' } --&gt;
              &lt;td class="text-center"&gt;                                                                
                  &lt;h4 data-bind="text: $root.DesignScore(design)().OceanAcidification"&gt;&lt;/h4&gt;
              &lt;/td&gt;
              &lt;!-- /ko --&gt;                            
          &lt;/tr&gt;
  
          // ...                            
  
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Right now, I am iterating through every design for each category, and calling DesignScore nine times in my data-binding, even though a single call to DesignScore function would return all the results across all categories for a design.</p>
  
  <p><strong>Question:</strong> Is there a way to foreach through each design once, and data-bind the results across the categories down a column?
  HTML only has a tr elements, but not a tc for column.</p>
  
  <p><strong>UPDATE1:</strong></p>
  
  <p>I have split the DesignScore function up into separate functions, and data-bind the results of each in a knockout template.  The resulting table through is one column though.</p>
  
  <p>Output:</p>
  
  <pre><code>des1  des2  des3
  ==================
  
  1560 (ie. des1's Climate Change)
  
  0.1  (ie. des1's Ozone Depleition)
  
  3900.7 (ie. des2's Climate Change)
  
  0.2
  
  3588.6
  
  0.3
  </code></pre>
  
  <p>Code:</p>
  
  <pre><code>&lt;table&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th class="col-md-2 text-center"&gt;&amp;nbsp;&lt;/th&gt;
          &lt;!-- ko foreach: Designs --&gt;
          &lt;th class="text-center"&gt;
              &lt;h5 data-bind="text: Name"&gt;&lt;/h5&gt;
          &lt;/th&gt;
          &lt;!-- /ko --&gt;
      &lt;/tr&gt;
  &lt;/thead&gt; 
  &lt;tbody data-bind="template: { name: 'impact-category-template', foreach: $root.Designs, as: 'design' }"&gt;&lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;script type="text/html" id="impact-category-template"&gt;    
        &lt;tr&gt;
            &lt;td class="text-center"&gt; 
                &lt;h4 data-bind="text: $root.ClimateChange(design)"&gt;&lt;/h4&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td class="text-center"&gt; 
                    &lt;h4 data-bind="text: $root.OzoneDepletion(design)"&gt;&lt;/h4&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
  &lt;/script&gt;
  </code></pre>