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 に答える