Foreach：各アイコンを切り替える - KnockoutJS

Question

プラス記号をマイナス記号に切り替えようとしていますが、すぐにその部分がクリックされて展開されています。コードに続いて私は試しました。

<div> 
    <ul style="list-style: none"> 
     <li data-bind="foreach: model"> 
      <div id="panelHeading"> 
       <a href="#" data-bind="click: $parent.toggleShow"><i class="fa fa-plus" style="padding-right: 5px;">+</i></a> 
       <span data-bind="text: Main"></span> 
      </div> 
      <div id="panelContent" data-bind="if: show"> 
       <ul id="clustersList" data-bind="foreach: Sub" style="list-style: none"> 
        <li><span style="padding-left: 20px;" data-bind="text: $data"></span></li> 
       </ul> 
      </div> 
     </li> 
    </ul> 
</div> 
=== JS ==== 
    var viewModel = function() { 
     var self = this; 
     self.model = ko.observableArray([{ 
     Main: "Main1", 
     Sub: ["hello", "hi"], 
     show: ko.observable(false) 
     }, { 
     Main: "Main2", 
     Sub: ["one", "two"], 
     show: ko.observable(false) 
     }]); 
     self.toggleShow = function (item) { 
     $('this a').find('i').toggleClass('fa fa-plus fa fa-minus'); 
     var index = self.model.indexOf(item); 
     if (item.show()) 
      self.model()[index].show(false); 
     else 
      self.model()[index].show(true); 
     } 
    } 

    ko.applyBindings(new viewModel()); 

私のフィドルhereを確認してください。

提案が参考になります。

Answer 1

だけshowの電流値に基づいて適切なスタイルを適用するには、あなたのHTMLを変更します。

<i class="fa" data-bind="css: { 'fa-plus': !show(), 'fa-minus': show() }"></i> 

そして、あなたのJSで：あなたはノックアウトを使用している場合

self.toggleShow = function (item) { 
    item.show(!item.show()); 
}; 

はFiddle