数组的文本绑定元素答案

【问题标题】：Text binding elements of array数组的文本绑定元素
【发布时间】：2015-12-26 13:54:40
【问题描述】：

我有两个数组 selectedItems 和 datas，我想从 datas 中获取数据，并且从 selectedItems 数组中获取列信息。它如何给我空格而不是 datas 数组中的数据。

ko.applyBindings({
            chosenItems: [
              {
                  headerText: "C1",
                  alignment:"left"
              },
              {
                  headerText: "C3",
                  alignment:"right"
              }
            ],
            datas: [
              {
                  C1:"Peter",
                  Age: 21
              },
              {
                  C2: "Pater",
                  Age: 31
              },
              {
                  C3: "Cecel",
                  Age: 23
              }
            ]
        });

 <tbody data-bind="foreach: {data:chosenItems,as :'column'}">
         <tr data-bind=" foreach: {data:datas,as: 'datum'}">
              <td>
                   <span data-bind="text: datum[column.headerText]"></span>
              </td>
         </tr>
 </tbody>

这里的用例是数据是动态的，可以有任何数据，但我只选择显示由choosenItems数组控制的某些项目。

【问题讨论】：

你的 datas 数组是什么样子的？
@Thunder 只需将 $parent 添加到内部 foreach（在 tr 上）datas 在这里查看jsfiddle.net/LkqTU/26978

标签： javascript arrays knockout.js binding

【解决方案1】：

不确定您的数组和数据是如何从 ViewModel 填充的。

你试过下面的吗，

<span data-bind="text: $data"></span>

您能否展示您的视图模型代码，特别是针对这两个数组的chosenItems 和datas。

【讨论】：

【解决方案2】：

如果我理解了你的场景，你应该使用“table”元素：

ko.applyBindings({
            chosenItems: [
              {
                  headerText: "C1",
                  alignment:"left"
              },
              {
                  headerText: "C3",
                  alignment:"right"
              }
            ],
            datas: [
              {
                  C1:"Peter",
                  Age: 21
              },
              {
                  C2: "Pater",
                  Age: 31
              },
              {
                  C3: "Cecel",
                  Age: 23
              }
            ]
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<table>
  <tbody data-bind="foreach: { data: chosenItems, as: 'column' }">
         <tr data-bind="foreach: { data:$parent.datas, as: 'datum' }">
              <td>
                   <span data-bind="text: datum[column.headerText]"></span>
              </td>
         </tr>
  </tbody>
</table>

更新

我已根据更新的问题文本更新了视图模型。您也可以使用“$root.datas”以及“$parent.datas”。

【讨论】：