html - 不可见数据绑定时如何防止 HTML 呈现

Question

如果 isBannerVisible 为真，我有此代码显示警报横幅。但是，如果该值为 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 回答，这里是如何做到这一点的例子：

<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>