Question

我是新的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 |  Firstname3
Lastname   | Lastname1   | Lastname2  |  Lastname3

我想使用淘汰模板，有没有更好的方法来实现这一目标？非常感谢任何帮助。

Answer 1

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

这是因为您必须通知模板需要呈现的员工的哪个部分，并且没有本地方式。模板旨在呈现一种类型的对象。使用相同的模板在同一类型的对象上呈现不同的属性违背了它们的用例。（替代方案，即使用两个不同的模板，违背了您的简化意图。）

你可以探索custom bindings，但我倾向于说'＃34;过度工程＆＃34;我怀疑在这种情况下值得付出的努力。

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

<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数组中的字符串。

Knockout布局和与转置行的绑定

1 个答案: