Отключить якорный тег в knockout.js

Ответ 1

Ярлычные теги не могут быть отключены.

Самый простой способ - использовать ko if binding, а затем отобразить span вместо anchor, если идентификатор skype равен 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 -->

Вот скрипка

Ответ 2

Если в элементе a нет атрибута href, а только действие в 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.

Здесь скрипта

Ответ 3

Отключить работу только с элементами формы, а не с привязными тегами. Вместо этого вы можете использовать привязку visible и просто скрыть ссылку, если нет идентификатора пользователя. Если вы хотите показать что-то, даже если нет идентификатора пользователя, добавьте пробел с противоположным видимым тестом, тогда один будет отображаться, если есть идентификатор пользователя, а другой, если таковой нет:

<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')

Ответ 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);
      };
  })();

Когда вы включаете этот код, привязка enable будет работать для anhors

Fiddle, он использует мою библиотеку конвенций, поэтому игнорируйте эту часть http://jsfiddle.net/xCfQC/4/

Ответ 5

Включение/выключение нокаута не поддерживает теги привязки.

Итак, у вас есть 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 ">

Ответ 6

Я нашел 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

Ответ 7

Другой вариант, который мне нравится использовать, - отключить привязку, используя директиву "css:

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