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>

每次单击选项卡窗格时，该选项卡都会显示“活动”类。根据哪个选项卡处于活动状态，我要隐藏或显示li元素。我觉得我很亲密，但却错过了一些东西。

Answer 1

我不建议这样做。 showElement属性与视图模型中的任何其他observable没有依赖关系，因此永远不会更新。

您应该更改它，以便根据视图模型中选择的内容应用active类。然后，您可以在出现Element Text时显示。

根据某些条件向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>

然后在视图模型中设置这些条件：

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

fiddle

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

1 个答案: