html - データバインディングが表示されていないときに HTML レンダリングを防止する方法

Question

isBannerVisible が true の場合に警告バナーを表示するこのコードがあります。ただし、値が false の場合でも、バナーは数秒間レンダリングされてから消えます。これを防ぐ方法がわかりません。その前に追加しようと<div style="display:none" data-bind="visible: true">しましたが、isBannerVisible = true または false に表示されません。

  <div data-requisite="mybiz.businesscenter.infobannercomponent" data-bind="if: shouldInitialize">
    <div class="alert alert-info alert-dismissable" data-bind="visible: isBannerVisible()">
        <button type="button" class="close" data-dismiss="alert" data-bind="click: bannerClose"
                aria-hidden="true">
            &times;
        </button>

JS.....
    var InfoBannerViewModel = function ($el) {
                    var self = this;
                    .....
                    self.isBannerVisible = ko.observable((!dataStore.getItem('isBannerVisible') ? true : dataStore.getItem('isBannerVisible')));
                     .......


            };

            var _init = function ($el) {
                        var infoBannerViewModel = new InfoBannerViewModel($el);
                        app.bind(infoBannerViewModel, $el);
            };

            return {
                init: _init
            };
        });

Answer 1

上記のコメントの @super cool answer に同意します。これを行う方法の例を次に示します。

<div data-requisite="mybiz.businesscenter.infobannercomponent" data-bind="if: shouldInitialize">
   <!-- ko if: isBannerVisible() -->
    <div class="alert alert-info alert-dismissable">
        <button type="button" class="close" data-dismiss="alert" data-bind="click: bannerClose"
                aria-hidden="true">
            &times;
        </button>
     </div>
    <!-- /ko -->
</div>