删除布局和用转置行绑定

Knockout layout and binding with transposed rows

本文关键字：绑定 转置 布局 删除      更新时间：2023-09-26

我是new 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>

这些行应该像下面那样调换

<>之前Firstname | Firstname1 | Firstname2 | Firstname3Lastname | Lastname1 | Lastname2 | Lastname3之前

我想使用knockout模板，有更好的方法来实现这一点吗?

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

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

您可以探索自定义绑定，但我倾向于说"这是过度工程"，并且我怀疑在这种情况下它是否值得付出努力。

我将使用一个虚拟元素(一个看起来像<!-- ko ... --> <!-- /ko -->的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指向父数据，在本例中是properties数组中的字符串。

相关文章：