淘汰赛布局和转置行绑定答案

【问题标题】：Knockout layout and binding with transposed rows淘汰赛布局和转置行绑定
【发布时间】：2014-07-14 11:16:29
【问题描述】：

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

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

这些行应该如下转置

名字 |名字1 |名字2 |名字3 姓氏 |姓氏1 |姓氏2 |姓氏3

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

【问题讨论】：

你忘了说是什么问题。
Tomalak，有没有更好的方法来实现这一点，看到我在列表中循环多次列出元素，我正在寻找一种更好的方法来实现这一点，没有多余的循环可能是使用 ko 模板就更好了，

标签： javascript twitter-bootstrap knockout.js x-editable

【解决方案1】：

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

这是因为您必须通知模板需要渲染员工的哪一部分，并且没有本地方法可以做到这一点。模板旨在呈现一种单一类型的对象。使用相同的模板在相同类型的对象上呈现不同的属性违背了他们的用例。（替代方案，即使用两个不同的模板，与您的简化意图背道而驰。）

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

我会使用虚拟元素（类似于   的 HTML 注释）而不是您的 visible 绑定，但除此之外，我的方法看起来与您的方法大致相同：

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

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

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

【讨论】：