22

我需要在 HTML 中的 knockout.js 的 foreach 循环中禁用锚标记。

这是我的代码：

<a id="aQStreamSkype" data-bind="attr:{href: ''}, click: $parent.StoreUserClick,disable: ($data.SkypeId == 'null')">Skype </a>
4

8 回答 8

26

锚标签不能被禁用。
最简单的方法是使用ko if binding然后渲染 aspan而不是anchor如果 skype id 为 null

<!-- ko if: skypeId === null -->
    <span >No Skype Id</span>
<!-- /ko -->
<!-- ko if: skypeId !== null -->
    <a id="aQStreamSkype" data-bind="attr:{href: ''}, click: $parent.StoreUserClick,text: skypeId"></a>
<!-- /ko -->

这是一个小提琴

于 2013-04-12T14:24:14.230 回答
14

如果元素上没有href属性，a而只有 a 中的动作click binding，那么一种简单的方法是将表达式传递condition && handler给单击绑定。

如果条件是可观察的，您需要添加括号。

<a data-bind="click: flag1() && handler">Enabled link</a>
<a data-bind="click: flag2() && handler">Disabled link</a>

它将被评估为falseif condition is false（所以什么都不会发生），
并且如果 condition is 将被评估为一个处理程序true。

在这里提琴

于 2014-11-28T15:52:13.997 回答
6

首先，有一种思想流派，我对此表示同情，说不要这样做。什么都不做的超链接只是文本。

但是，我可以看到硬币的另一面 - 我遇到了同样的问题，因为我使用的是包含锚标签作为菜单选项的 Bootstrap 下拉菜单，并且在我看来，它可以提供更好的用户体验来显示菜单选项禁用而不是根本不显示它们，而且我觉得“禁用”超链接比包含超链接和span具有相同文本的标记然后有条件地显示一个或另一个更干净。所以，我的解决方案是：

<a data-bind="click: checkCondition() ? myFunction : null, css: { disabled: !checkCondition() }"></a>

请注意，这checkCondition()是一个返回 true 或 false 的函数，指示是否应启用超链接。绑定只是将超链接设置为禁用 -如果您不使用 Bootstrap，您可能必须添加自己的 CSS类css。.disabled

这个工作的关键是锚没有href属性，所以它作为一个没有 Knockoutclick绑定的超链接是没有用的，这意味着你可以很容易地使用这个方法来处理任何元素类型（例如，这可能是一个可点击span的，就像锚）。但是，我想使用一个锚点，这样我的样式就可以继续应用而无需任何额外的工作。

于 2018-09-05T09:16:02.080 回答
2

禁用仅适用于表单元素，不适用于锚标记。您可以改用可见绑定，如果没有用户 ID，只需隐藏链接。如果您确实想在没有用户 ID 的情况下显示某些内容，则添加一个具有相反可见测试的跨度，如果有用户 ID，则显示一个，如果没有，则显示另一个：

<a id="aQStreamSkype" data-bind="attr:{href: ''}, click: $parent.StoreUserClick, visible: ($data.SkypeId !== 'null')">Skype </a>
<span class="notLink" data-bind="visible: ($data.SkypeId === 'null')">Skype </span>

附带说明一下，如果 SkypeId 是可观察的，则需要在比较检查中将其称为一个：

($data.SkypeId() !== 'null')
于 2013-04-12T10:35:15.390 回答
1

通过一些覆盖魔法，您可以在不需要更改视图或 ViewModel 代码的情况下获得此行为

  (function () {
      var orgClickInit = ko.bindingHandlers.click.init;
      ko.bindingHandlers.click.init = function (element, valueAccessor, allBindingsAccessor, viewModel) {
          if (element.tagName === "A" && allBindingsAccessor().enable != null) {
              var disabled = ko.computed(function () {
                  return ko.utils.unwrapObservable(allBindingsAccessor().enable) === false;
              });
              ko.applyBindingsToNode(element, { css: { disabled: disabled} });
              var handler = valueAccessor();
              valueAccessor = function () {
                  return function () {
                      if (ko.utils.unwrapObservable(allBindingsAccessor().enable)) {
                          handler.apply(this, arguments);
                      }
                  }
              };

          }
          orgClickInit(element, valueAccessor, allBindingsAccessor, viewModel);
      };
  })();

当您包含该代码时，启用绑定将适用于 anhors

小提琴，它使用我的约定库，所以忽略那部分 http://jsfiddle.net/xCfQC/4/

于 2013-04-12T12:55:18.067 回答
0

Knockout 启用/禁用绑定不支持锚标签。

所以你有两个解决方案。

解决方案 1 

<a href='#' title="Skype" data-bind='click: function() { 
 if(($data.SkypeId !== 'null'))
 {
    //call the desired method from here
 }' >

解决方案 2

此按钮仅在您的条件成功且具有点击绑定时显示

<a data-bind="click: $parent.StoreUserClick, visible: ($data.SkypeId != 'null')" href="#" title="Skype">

此按钮仅在您的否定条件成功且没有点击绑定时显示

<a data-bind="visible: ($data.SkypeId == 'null')" href="#" title="Skype ">
于 2013-04-12T10:38:23.030 回答
0

我发现ko.plus是一个实现命令模式的优秀库。在“canExecute”条件为真之前，不能执行“动作”。

var vm = {
    enabled: ko.observable(false),
    StoreUserClick: ko.command({
        action: function () {
            window.alert('Command is active')
        },
        canExecute: function () {
            return vm.enabled();
        }
    })
}
ko.applyBindings(vm);
a.disabled {
    color: gray;
    text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://raw.githubusercontent.com/stevegreatrex/ko.plus/master/dist/ko.plus.js"></script>

<a href="" id="aQStreamSkype" data-bind="click: StoreUserClick, css: { disabled: !StoreUserClick.canExecute() }">Skype</a>
<br />
<br />
<input type="checkbox" data-bind="checked: enabled">enabled

于 2015-07-30T23:03:36.473 回答
-1

我喜欢使用的另一个选项是使用“css”指令禁用锚点：

<a id="aQStreamSkype" data-bind="css: { disabled: $data.SkypeId == 'null' }">Skype</a>
于 2017-12-30T00:39:25.203 回答