Vô hiệu hóa thẻ neo trong knockout.js

Question

Tôi cần vô hiệu hóa thẻ neo bên trong vòng lặp forout của knockout.js trong HTML.

Đây là mã của tôi:

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

Answer 1

Disable chỉ hoạt động với các yếu tố hình thức, không neo thẻ. Thay vào đó, bạn có thể sử dụng liên kết visible và chỉ ẩn liên kết nếu không có id người dùng. Nếu bạn muốn hiển thị nội dung nào đó ngay cả khi không có id người dùng, thì hãy thêm khoảng thời gian với kiểm tra có thể nhìn thấy đối diện, sau đó sẽ hiển thị nếu có id người dùng và một nếu không có:

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

là một mặt lưu ý, nếu SkypeId là một quan sát, bạn sẽ cần phải gọi nó là một trong trong tầm kiểm soát so sánh của bạn:

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

Answer 2

Knockout cho phép/vô hiệu hóa ràng buộc không hỗ trợ thẻ neo.

Vì vậy, bạn có 2 giải pháp cho việc này.

Giải pháp 1

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

Giải pháp 2

Nút này chỉ hiển thị khi tình trạng của bạn là thành công và nó có ràng buộc

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

Nút này chỉ hiển thị khi nhấp chuột điều kiện tiêu cực là thành công và nó không có ràng buộc nhấp chuột

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

Answer 3

Với một số ma thuật override bạn có thể nhận hành vi này mà không có cái nhìn của bạn hoặc ViewModel cần mã thay đổi

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

Khi bạn đưa mã Enable ràng buộc sẽ làm việc cho anhors

Fiddle, nó sử dụng thư viện quy ước của tôi để bỏ qua phần đó http://jsfiddle.net/xCfQC/4/

Answer 4

Anc không thể tắt thẻ hor.
Cách đơn giản nhất là sử dụng ko if binding và sau đó render một span thay vì anchor nếu id skype là 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 5

Nếu không có href thuộc tính trên a yếu tố nhưng chỉ một hành động trong một click binding , sau đó một cách dễ dàng sẽ chuyển biểu thức condition && handler thành liên kết nhấp chuột.

Nếu điều kiện có thể quan sát, bạn sẽ cần phải thêm dấu ngoặc đơn.

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

Nó sẽ được đánh giá như false nếu điều kiện là false (vì vậy không có gì sẽ xảy ra),
và sẽ được đánh giá như một handler nếu điều kiện là true.

Fiddle here

Answer 6

tôi thấy ko.plus một thư viện tuyệt vời mà thực hiện mô hình lệnh. Không thể thực thi 'hành động' cho đến khi điều kiện 'canExecute' là đúng.

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

Một tùy chọn khác mà tôi muốn sử dụng là để vô hiệu hóa bằng cách sử dụng neo "css" chỉ:

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