使用knockout.js跨列数据绑定javascript关联数组

在C DestopModel.cs中，我们定义了一个DesktopViewModel，其中包含许多设计

public class DesktopViewModel
{
        public Guid Id { get; set; }              
        public List<DesktopDesignViewModel> Designs { get; set; }
        // ...
}

以下是我目前对结果进行数据绑定的方式：

<table>
    <thead>
        <tr>
            <th class="col-md-2 text-center">&nbsp;</th>
            <!-- ko foreach: Designs -->
            <th class="text-center">
                <h5 data-bind="text: Name"></h5>
            </th>
            <!-- /ko -->
        </tr>
    </thead>
    <tbody>
        <tr class="top-border-row">
            <td class="text-center">
                <h4>Climate Change</h4>
            </td>
            <!-- ko foreach: { data: $root.Designs, as: 'design' } -->
            <td class="text-center">                                                                
                <h4 data-bind="text: $root.DesignScore(design)().ClimateChange"></h4>
            </td>
            <!-- /ko -->                            
        </tr>

        <tr class="top-border-row">
            <td class="text-center">
                <h4>Ocean Acidification</h4>
            </td>
            <!-- ko foreach: { data: $root.Designs, as: 'design' } -->
            <td class="text-center">                                                                
                <h4 data-bind="text: $root.DesignScore(design)().OceanAcidification"></h4>
            </td>
            <!-- /ko -->                            
        </tr>

        // ...                            

    </tbody>
</table>

代码：

---

这真的不应该那么难。我不完全理解您的数据模型，但我会尝试将每一行建模为一个对象，并使用模板来渲染它。尽量简化

至于计算方法，每个类别是否相似？如果计算一次，我认为不需要计算

function DesktopDesignViewModel() {
  var self = this;
  self.categoryName= ko.observable();
  self.dest1= ko.observable();
  self.dest2= ko.observable();
  self.dest3= ko.observable();
  //may be used as constructor to fill in observables
  self.superCalc = function(){}; 
}


<script id="resultsTemplate" type="text/html">
   <tr>
       <td data-bind="text: categoryName"></td>
       <td data-bind="text: dest1"></td>
       <td data-bind="text: dest2"></td>
       <td data-bind="text: dest3"></td>
   </tr>
</script>

<table>
  <thead>
     <tr>
       <th>Name</th>
       <th>Dest1</th>
       <th>Dest2</th>
       <th>Dest3</th>
    </tr>
    </thead>
      <tbody data-bind="template: { name: 'resultsTemplate', foreach: Designs}"></tbody>
</table>

---

谢谢你的回复。我不确定您建议的解决方案将如何映射到我的数据模型。首先，您的dest1、dest2和dest3字段，如果它们与上面的我的des1、des2、des3相对应，则它们是设计名称，并且对于每个设计都是动态的。DesignScore函数返回我们传入的一个设计的九个类别的分数集。它返回一个ko.computed值，因为它依赖于其他ko.computed可观测值。我没有看到在绑定中使用DesignScore的返回值的解决方案。在阅读了淘汰文档后，使用模板可能是解决我的代码冗余问题的一种方法，我可能不得不打破现有的DesignScore，因为我没有设计数据模型，所以气候变化、海洋酸化。。。etc是ViewModel的独立函数，而不是通过单个DesignScore函数作为javascript关联数组返回所有内容。然后，我可以尝试分别绑定每个类别的每个单独的DesignScore函数。我尝试分解我的DesignScore函数，并像UPDATE1一样应用淘汰模板。但是当我浏览我的设计时，每一个设计都应该占用一列，我的输出只会叠加到一列。所以它仍然不起作用。当你查看源代码时，它是否有正确的值，只是在错误的位置？是的，正确的值，但我不知道如何以与OP中相同的方式格式化这些值，因为模板中带有任何tr元素的设计上的foreach绑定会自动将设计和相关影响按行堆叠在彼此之上。

<table>
    <thead>
        <tr>
            <th class="col-md-2 text-center">&nbsp;</th>
            <!-- ko foreach: Designs -->
            <th class="text-center">
                <h5 data-bind="text: Name"></h5>
            </th>
            <!-- /ko -->
        </tr>
    </thead>
    <tbody>
        <tr class="top-border-row">
            <td class="text-center">
                <h4>Climate Change</h4>
            </td>
            <!-- ko foreach: { data: $root.Designs, as: 'design' } -->
            <td class="text-center">                                                                
                <h4 data-bind="text: $root.DesignScore(design)().ClimateChange"></h4>
            </td>
            <!-- /ko -->                            
        </tr>

        <tr class="top-border-row">
            <td class="text-center">
                <h4>Ocean Acidification</h4>
            </td>
            <!-- ko foreach: { data: $root.Designs, as: 'design' } -->
            <td class="text-center">                                                                
                <h4 data-bind="text: $root.DesignScore(design)().OceanAcidification"></h4>
            </td>
            <!-- /ko -->                            
        </tr>

        // ...                            

    </tbody>
</table>

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

<table>
<thead>
    <tr>
        <th class="col-md-2 text-center">&nbsp;</th>
        <!-- ko foreach: Designs -->
        <th class="text-center">
            <h5 data-bind="text: Name"></h5>
        </th>
        <!-- /ko -->
    </tr>
</thead> 
<tbody data-bind="template: { name: 'impact-category-template', foreach: $root.Designs, as: 'design' }"></tbody>
</table>

<script type="text/html" id="impact-category-template">    
      <tr>
          <td class="text-center"> 
              <h4 data-bind="text: $root.ClimateChange(design)"></h4>
          </td>
      </tr>
      <tr>
          <td class="text-center"> 
                  <h4 data-bind="text: $root.OzoneDepletion(design)"></h4>
          </td>
      </tr>
</script>

function DesktopDesignViewModel() {
  var self = this;
  self.categoryName= ko.observable();
  self.dest1= ko.observable();
  self.dest2= ko.observable();
  self.dest3= ko.observable();
  //may be used as constructor to fill in observables
  self.superCalc = function(){}; 
}


<script id="resultsTemplate" type="text/html">
   <tr>
       <td data-bind="text: categoryName"></td>
       <td data-bind="text: dest1"></td>
       <td data-bind="text: dest2"></td>
       <td data-bind="text: dest3"></td>
   </tr>
</script>

<table>
  <thead>
     <tr>
       <th>Name</th>
       <th>Dest1</th>
       <th>Dest2</th>
       <th>Dest3</th>
    </tr>
    </thead>
      <tbody data-bind="template: { name: 'resultsTemplate', foreach: Designs}"></tbody>
</table>