javascript - knockout 布局和转置行装订

Question

我是新的knockout.js，我正在使用x-editable和knockout-x-editable来绑定(bind)数据输入表单，如下所示，

<table>
  <tbody>
    <tr data-bind="foreach: employee">
      <td class="span1">
        <span data-bind="visible: $index() == 0">Firstname</span>
      </td>
      <td class="span1 protected">
        <span data-bind="editable: Firstname, editableOptions: { name:'Firstname', pk: ID"></span>
      </td>
    </tr>
    <tr data-bind="foreach: employee">
      <td class="span1">
        <span data-bind="visible: $index() == 0">Lastname</span>
      </td>
      <td class="span1 protected">
        <span data-bind="editable: Lastname, editableOptions: { name:'Lastname', pk: ID"></span>
      </td>
    </tr>
  </tbody>
</table>

行应按如下方式转置

Firstname  | Firstname1  | Firstname2 |  Firstname3
Lastname   | Lastname1   | Lastname2  |  Lastname3

我想使用 knockout 模板，有没有更好的方法来实现这一点？非常感谢对此的任何帮助。

Answer 1

无论如何，您都需要循环访问同一个列表两次。使用模板不会给您带来真正的好处。

这是因为您必须告知模板需要渲染员工的哪一部分，并且没有原生方法可以做到这一点。模板旨在呈现一种单一类型的对象。使用相同的模板在同一类型的对象上呈现不同的属性违背了它们的用例。 (另一种选择，即使用两个不同的模板，违背了您的简化意图。)

您可以探索custom bindings ，但我倾向于说“这是过度设计”，并且我怀疑在这种情况下是否值得付出努力。

我会使用虚拟元素(类似于 <!-- ko ... --> <!-- /ko --> 的 HTML 注释)而不是 visible绑定(bind)，但除此之外我的方法看起来与你的大致相同:

<table>
  <tbody>
    <tr>
      <th class="span1">Firstname</th>
      <!-- ko foreach: employee -->
      <td class="span1 protected">
        <span data-bind="
           editable: Firstname, 
           editableOptions: { name: 'Firstname', pk: ID }
        "></span>
      </td>
      <!-- /ko -->
    </tr>
    <tr data-bind="foreach: employee">
      <th class="span1">Lastname</th>
      <!-- ko foreach: employee -->
      <td class="span1 protected">
        <span data-bind="
          editable: Lastname, 
          editableOptions: { name: 'Lastname', pk: ID }
        "></span>
      </td>
      <!-- /ko -->
    </tr>
  </tbody>
</table>

<小时/>

如果您想要将更多属性呈现到表中，您可以更改数据模型:

function ViewModel() {
  var self = this;

  self.employee = ko.observableArray([/* many employees here */]);
  self.properties = ['Firstname', 'Lastname', 'Email', 'Phone', 'Jobtitle'];
}

和

<table>
  <tbody data-bind="foreach: properties">
    <tr>
      <th class="span1" data-bind="text: $data"></th>
      <!-- ko foreach: $root.employee -->
      <td class="span1 protected">
        <span data-bind="
           editable: $data[$parent], 
           editableOptions: { name: $parent, pk: ID }
        "></span>
      </td>
      <!-- /ko -->
    </tr>
  </tbody>
</table>

请注意，绑定(bind)上下文可以嵌套:foreach: properties创建一个新上下文，内部上下文 ( foreach: $root.employee ) 可以通过 $parent 引用外部上下文多变的。这样您就可以为员工的不同属性重复使用内部设置(并且您可以在代码中定义输出的顺序)。

$parent指的是父数据，在这种特定情况下，它是 properties 中的字符串。数组。