2

我想根据页面上的另一个元素是否具有某个类来使 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 元素。我觉得我很接近，但错过了一些东西。

4

1 回答 1

3

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

您应该更改它，以便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';
});

小提琴

于 2012-07-23T17:36:54.773 回答