2

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>ことに気付きました。また、今ヒットすると、リスト内の各アイテムが再バインドされ、選択したものだけでなく、すべてのアイテムがテンプレートに切り替わることに気付きました。itemTemplatesitemedit

何か案は?

4

1 に答える 1