data-binding - knockout.js 基于 css 类添加可见性 observable

Question

我想根据页面上的另一个元素是否具有某个类来使 HTML 元素可见:

function MyViewModel() {
    var self = this;          

    this.showElement = ko.computed(function() {            
        return $('#history').hasClass('active');
    }, this);
}

<li data-bind="visible: showElement">Element Text</li>
<div id="summary" class="tab-pane fade in active"></div>
<div id="history" class="tab-pane fade in"></div>

每当单击选项卡 Pane 时，该选项卡都会获得“事件”类。根据哪个选项卡处于事件状态，我想隐藏或显示 li 元素。我觉得我很接近，但错过了一些东西。

Answer 1

我不建议这样做。 showElement属性不依赖于 View 模型中的任何其他可观察对象，因此它永远不会被更新。

您应该将其更改为 active将根据您在 View 模型中选择的内容应用类。然后你可以有你的Element Text应该出现的时候出现。

添加绑定(bind)到您的 div 以应用 active基于某些条件的类，并根据您想要的条件将您的元素设置为可见:

<div id="summary" class="tab-pane"
     data-bind="click: select, css: { active: summaryActive }">SUMMARY</div>
<div id="history" class="tab-pane"
     data-bind="click: select, css: { active: historyActive }">HISTORY</div>

<li data-bind="visible: historyActive">Element Text</li>

然后在您的 View 模型中设置这些条件:

self.selected = ko.observable(null);
self.summaryActive = ko.computed(function () {
    return self.selected() === 'summary';
});
self.historyActive = ko.computed(function () {
    return self.selected() === 'history';
});

fiddle