Question

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

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数组控制的某些项目。

Answer 1

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

你试过以下吗，

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

您是否可以展示您的viewmodel代码，专门针对这两个数组chosenItems和datas。

Answer 2

如果我了解您的情况，您应该使用＆＃34; table＆＃34;元素：

＆＃13;

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

＆＃13;

<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>

＆＃13;

更新

我根据更新的问题文本更新了视图模型。你也可以使用＆＃34; $ root.datas＆＃34;以及＆＃34; $ parent.datas＆＃34;。

数组的文本绑定元素

2 个答案:

更新