Knockout.js：親li要素にクリックバインディングがあるときに子タグが機能しない

Question

各項目がそれ自身のサブメニューを切り替えるメニューがあります。ここにサンプルコードがあります。あなたが見ることができるように、サブメニューアイテムは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> 

すべてのタグは機能しません、何が問題なのですか？

Answer 1

リンクをクリックすると、showMenu機能によって引き上げられて処理されるクリックイベントが発生します。デフォルトでは、KOはブラウザのデフォルト動作をトリガーしないため、リンクは開かれません。あなたが必要なもの

が、これは、ブラウザのデフォルトの動作をトリガするためにKOに指示し、また、あなたのshowMenu実行を防ぐためにfalseにclickBubbleプロパティを設定する必要があるかもしれませんtrueを返すあなたのリンクのクリックイベントハンドラを追加することです：

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

documentationのクリックバインディングについて詳しく読むことができます。

デモJSFiddle.