Knockout.js: con một thẻ không hoạt động khi phần tử cha mẹ đã nhấp vào liên kết

Question

Tôi có một trình đơn mà mỗi mục chuyển đổi menu phụ riêng của nó, đây là mã mẫu. như bạn có thể thấy mục menu phụ là một thẻ liên kết đến google.co.nz

<ul id="menuHolder"> 
    <li data-bind="click: showMenu.bind($data, 1)"> 
     Main menu item 
     <ul class="submenu" data-bind="visible: selected() == '1'"> 
      <li> 
       <a class="sub-item" href="http://google.co.nz"> 
        Submenu item 
       </a> 
      </li> 
     </ul> 
    </li> 
</ul> 
<script type="text/javascript"> 
    var menuModel = function() { 
    var self = this; 
    self.selected = ko.observable(0);   
    self.showMenu = function (data) { 
     var s = self.selected(); 
     if (s > 0 && data == s) 
      self.selected(0); 
     else 
      self.selected(data); 
    };  
} 
ko.applyBindings(new menuModel(), document.getElementById("menuHolder")); 
</script> 

mọi thứ chỉ hoạt động với thẻ không còn hoạt động, có gì sai ở đây?

Answer 1

Sự cố của bạn như sau: nhấp vào liên kết sẽ tăng sự kiện nhấp đúp và được xử lý bởi hàm showMenu và theo mặc định KO sẽ không kích hoạt hành vi mặc định của trình duyệt để liên kết của bạn không mở.

Những gì bạn cần là thêm một xử lý sự kiện nhấp chuột vào liên kết của bạn mà trả true này cho KO để kích hoạt hành vi mặc định của trình duyệt và bạn cũng có thể cần phải thiết lập clickBubble tài sản để false để ngăn chặn showMenu thi của bạn:

<a class="sub-item" href="http://google.co.nz" 
    data-bind="click: function(){ return true }, clickBubble: false" > 
     Submenu item 
</a> 

Có thể đọc thêm về liên kết nhấp chuột trong số documentation.

Demo JSFiddle.