2 つのテンプレートを持つデータ テーブルがあります。デフォルトで表示し、項目が選択されている場合は編集します。KO のテンプレートからデュランダルのコンポーズに切り替える方法を理解するのに苦労しています。これが私の現在の設定です:
意見
<table>
<tbody data-bind="foreach: { data: items }">
<tr>
<td data-bind="template: {name: $root.itemTemplates}"></td>
<td class="options">
<ul>
<li><a data-bind="click: edit">Edit...</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
<script id="viewTemplate" type="text/html">
<a href="" data-bind="text: name"></a>
</script>
<script id="editTemplate" type="text/html">
<form class="edit" data-bind="submit: $root.save">
<input type="text" name="name" data-bind="value: name, event: { keyup: $root.cancelEdit }" />
</form>
</script>
ビューモデル
self.selectedItem = ko.observable();
self.edit = function(item) {
self.selectedItem(item);
}
self.itemTemplates = function(item) {
return self.selectedItem() === item ? 'editTemplate' : 'viewTemplate';
}
を使用して構成に切り替えようとしましたが、パラメーターに対して undefined を返すため、関数が正しく機能しなくなっている<td data-bind="compose: itemTemplates()"></td>
ことに気付きました。また、今ヒットすると、リスト内の各アイテムが再バインドされ、選択したものだけでなく、すべてのアイテムがテンプレートに切り替わることに気付きました。itemTemplates
item
edit
何か案は?