2

我有一个带有两个模板的数据表：默认查看并在选中项目时进行编辑。我很难弄清楚如何从 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';
}

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

有任何想法吗？

4

1 回答 1

4

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

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

该view属性是控制使用哪个视图所必需的，没有它，viewLocator它将为模型寻找匹配的视图，默认约定是具有匹配名称的视图。

于 2013-07-25T22:35:57.713 回答