Question

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

这是我的代码：

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

Answer 1

无法停用锚标记。
最简单的方法是使用ko if binding，然后如果是Skype，则呈现span而不是anchor 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 -->

Here is a fiddle

Answer 2

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

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

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

如果条件为false（因此不会发生任何事情），它将被评估为false，如果条件为true，则将被评估为处理程序。

Fiddle here

Answer 3

禁用仅适用于表单元素，而不适用于锚标记。您可以使用visible绑定，只是在没有用户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')

Answer 4

使用一些覆盖魔法，您可以获得此行为，而不需要您的视图或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/

Answer 5

首先，有一种思想流派，我对此表示同情just don't do it。不执行任何操作的超链接只是文本。

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

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

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

此工作的关键是锚点没有href属性，因此如果没有Knockout click绑定，它就无用作为超链接，这意味着您可以轻松地将此方法与任何方法一起使用元素类型（例如，与锚点一样，它可以是可点击的span）。但是，我想使用锚，以便继续应用我的样式，而无需进行任何额外的工作。

Answer 6

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

所以你有2个解决方案。

解决方案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 ">

Answer 7

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

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

Answer 8

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

<a id="aQStreamSkype" data-bind="css: { disabled: $data.SkypeId == 'null' }">Skype</a>

在knockout.js中禁用锚标记

8 个答案: