javascript - Foreach : Toggle each icon - 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());

请检查我的 fiddle here .

任何建议都会有所帮助。

Answer 1

只需更改您的 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