Question

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

查看

<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将查找模型的匹配视图，即具有匹配名称的视图默认约定。

DurandalJS - 从KO模板切换到撰写

1 个答案: