Disabilita tag di ancoraggio in knockout.js

Question

Ho bisogno di disabilitare il tag di ancoraggio all'interno di un ciclo foreach di knockout.js in HTML.

Ecco il mio codice:

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

Answer 1

Disabilita funziona solo con elementi di modulo, non ancorare i tag. È possibile utilizzare invece il binding visible e nascondere semplicemente il collegamento se non è presente alcun ID utente. Se vuoi mostrare qualcosa anche se non c'è un ID utente, aggiungi un intervallo con il test visibile opposto, quindi verrà mostrato se c'è un ID utente e l'altro se non lo è:

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

come nota a margine, se SkypeId è un osservabile, sarà necessario chiamare come uno nel vostro controllo di confronto:

($data.SkypeId() !== 'null') 

Answer 2

Knockout abilitare/disabilitare vincolante non supportano i tag di ancoraggio.

Quindi avete 2 soluzioni a questo.

Soluzione 1

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

Soluzione solo 2

Questo pulsante viene visualizzato quando la sua condizione è successo e ha click vincolante

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

Questo pulsante viene visualizzato solo quando il la condizione negativa è positiva e non ha vincoli di clic

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

Answer 3

Con un po 'di override magia è possibile ottenere questo comportamento senza che la visualizzazione o il codice ViewModel bisogno di cambiamenti

(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); 
     }; 
    })(); 

Quando si include che il codice di abilitazione vincolante lavorerà per Ancoraggi

Fiddle, usa la mia libreria di convenzioni quindi ignora quella parte http://jsfiddle.net/xCfQC/4/

Answer 4

Anc i tag hor non possono essere disabilitati.
Il metodo più semplice è quello di utilizzare ko if binding e quindi rendere un span invece del anchor se l'skype id è nullo

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

Se non c'è href attributo a elemento ma solo un'azione in un click binding , quindi un modo semplice sarebbe passare l'espressione condition && handler a un bind di clic.

Se la condizione è osservabile, è necessario aggiungere parentesi.

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

sarà valutata come false se la condizione è false (quindi niente accadrà),
e verrà valutata come un gestore se la condizione è true.

Fiddle here

Answer 6

Ho trovato un ottimo ko.plus libreria che implementa modello di comando. L''azione' non può essere eseguita fino a quando la condizione 'canExecute' è vera.

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

Un'altra opzione che mi piace usare è quello di disabilitare l'ancora utilizzando il "css" direttiva:

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