Foreach：切換每個圖標 - KnockoutJS

我試圖將加號轉換爲減號，之後立即將該部分點擊並展開。遵循我試過的代碼。Foreach：切換每個圖標 - KnockoutJS

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

任何建議都會有幫助。

來源

2016-12-20 JG' s Spark

如果您正在使用淘汰賽爲什麼使用jQuery來操縱DOM？添加observable並將其映射到相應的綁定 – Rajesh

只要改變你的HTML應用基於的show電流值正確的樣式：

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

而在你的JS：

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

見Fiddle

來源

2016-12-20 13:08:06 haim770

Foreach：切換每個圖標 - KnockoutJS

回答

相關問題