我是新的tickout.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
我想使用基因剔除模板，有没有更好的方法来实现这一目标？在此方面的任何帮助将不胜感激。
最佳答案
无论如何，循环两次遍历同一列表是您需要做的。使用模板并不会给您真正的好处。
这是因为您必须告知模板它需要呈现员工的哪一部分，并且没有做到这一点的本地方法。模板旨在呈现一种单一类型的对象。使用相同的模板在相同类型的对象上呈现不同的属性与它们的用例背道而驰。 （另一种选择，即使用两个不同的模板，违背了您的简化意图。）
您可以探索custom bindings，但我倾向于说“这是过度设计”，并且我怀疑在这种情况下是否值得这样做。
我将使用虚拟元素（类似于<!-- 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数组中的字符串。