不可见数据绑定时如何防止 HTML 呈现答案

【问题标题】：How to prevent HTML rendering when not visible data-binding不可见数据绑定时如何防止 HTML 呈现
【发布时间】：2015-03-24 02:23:15
【问题描述】：

如果 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
            };
        });

【问题讨论】：

好吧，如果您设置visible，它将呈现整个内容，但它只是隐藏它。你应该在你的块顶部使用container-less IF，这应该适合你的场景。欢呼

标签： html knockout.js javascript-databinding

【解决方案1】：

我同意上面评论中@supercool 的回答，下面是如何做到这一点的示例：

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

【讨论】：

感谢您的回复，但我仍然得到相同的结果。 =[
经过测试，这是正确的（至少在 Knockout 3.4.1 中）。如果将内容放在 if 块中，则不会呈现内容，如示例中所示。