DurandalJS - 从 KO 模板切换到 Compose

Question

我有一个包含两个模板的数据表：默认情况下是 view，如果项目被选中则 edit。我很难弄清楚如何从 KO 的模板切换到 Durandal 的 compose。这是我当前的设置：

查看

<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';
}

现在我尝试使用<td data-bind="compose: itemTemplates()"></td> 切换到撰写，但我注意到我的itemTemplates 函数停止正常工作，因为它为item 参数返回未定义。我还注意到，当我现在点击edit 时，它会重新绑定列表中的每个项目，导致所有项目都切换模板，而不仅仅是我选择的那个。

有什么想法吗？

Answer 1

首先，确保您的视图在views 目录中各自的文件中，与您的itemTemplates 函数返回的名称相匹配。您可能希望将名称更改为更具描述性的名称，但这完全取决于您。然后，您的绑定应该如下所示。

<table>
  <tbody data-bind="foreach: items }">
    <tr>
      <td data-bind="compose: { view: $parent.itemTemplates(), model: $data }"></td>
      ...
    </tr>
  </tbody>
</table>

view 属性是控制使用哪个视图所必需的，没有它viewLocator 将寻找模型的匹配视图，即默认情况下具有匹配 name 的视图约定。