0

我需要根据是否显示/隐藏按钮：

  • (1) 有一些待定的更改
  • (2) 已经有一个正在进行的保存

我有canSave这两个条件的功能。

我的视图模型：

var canSave = ko.computed(function () {
    return hasChanges() && !isSaving();
});

以下是我使用此canSave功能的html：

  • 仅在不显示时才显示Remove按钮canSave
  • 仅在以下情况下显示Save按钮canSave
  • 仅在以下情况下显示Cancel按钮canSave

我的html：

<a data-bind="visible: !router.activeItem().canSave, 
              click: router.activeItem().deleteDocuments">
    Remove
</a>

<a data-bind="visible: router.activeItem().canSave, 
              click: router.activeItem().save">
    Save
</a>

<a data-bind="visible: router.activeItem().canSave, 
              click: router.activeItem().cancel">
    Cancel
</a>

它适用于Save&Cancel按钮但它不适用于Remove按钮：按钮永远不可见。似乎功能!之前canSave是问题所在。

RemovePS：只有在没有待处理的更改并且没有正在进行保存时，我才需要显示按钮。这就是为什么我需要打电话!router.activeItem().canSave

更新

最后，我通过用这样的条件包围我的 html 链接来让它工作ko if：

<!-- ko if: router.activeItem().canUpdate -->
    <a data-bind="visible: !router.activeItem().canSave(), 
                  click: router.activeItem().deleteDocuments">
        Remove
    </a>

    <a data-bind="visible: router.activeItem().canSave(), 
                  click: router.activeItem().save">
        Save
    </a>
    <a data-bind="visible: router.activeItem().canSave(), 
                  click: router.activeItem().cancel">
        Cancel
    </a>
<!-- /ko  -->

请注意，我没有在ko if: router.activeItem().canUpdate.

这样做的好处是在另一个（durandal）页面上导航时，如果目标页面没有该canUpdate功能，它将不会“深入我的 html”并且不会在!router.activeItem().canSave()不存在的表达式上出现错误目标页面。

4

1 回答 1

2

canSave在表达式中使用它时，你应该解开计算：

<a data-bind="visible: !router.activeItem().canSave(), 
              click: router.activeItem().deleteDocuments">
    Remove
</a>
于 2013-11-04T14:13:06.097 回答