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

Question

Мне нужно отключить тег привязки внутри цикла foreach файла knockout.js в HTML.

Вот мой код:

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

Answer 1

Отключить работает только с элементами форм, а не якорь тегов. Вместо этого вы можете использовать привязку 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') 

Answer 2

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

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

С некоторой коррекции магии вы можете получить это поведение без того, чтобы ваше мнение или потребность код 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 4

Anc hor теги не могут быть отключены.
Проще всего использовать ko if binding, а затем вынести span вместо anchor если скайп идентификатор является нулевым

<!-- 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 5

Если нет 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 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

Answer 7

Другой вариант, который я хотел бы использовать это, чтобы отключить якорь с помощью "CSS" директиву:

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