javascript - knockout.js でアンカー タグを無効にする

Question

HTML での knockout.js の foreach ループ内のアンカー タグを無効にする必要があります。

これが私のコードです：

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

Answer 1

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。

ここでフィドル

Answer 2

I found ko.plus an excellent library which implements command pattern. The 'action' can not be executed until 'canExecute' condition is true.

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 3

ノックアウトの有効化/無効化バインディングはアンカー タグをサポートしていません。

したがって、これには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 ">