How to prevent HTML rendering when not visible data-binding

Question

I have this code to show an alert banner if isBannerVisible is true. But if the value is false the banner still renders for a couple of seconds and then goes away. I have no idea how to prevent this from happening. I tried adding <div style="display:none" data-bind="visible: true"> before it and it doesn't show on isBannerVisible = true or 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
            };
        });

well if you set `visible` it will render the whole content but it simply hides it . you should be using a `container-less IF` on top of your block which should suit you scenario . cheers — super cool, Mar 24 '15 at 02:52

score 1 · Answer 1 · answered Mar 24 '15 at 06:54

1

I do agree with @super cool answer in comment above, and here is the example of how to do it:

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

answered Mar 24 '15 at 06:54

Fariz Azmi

713
1
6
21

Thank you for the response but I still got the same results. =[ – Breana Wiggins Mar 24 '15 at 13:14
Tested and this is correct (at least in Knockout 3.4.1). Content won't be rendered if it's placed inside an if block, as in the example. – BinarySolo Nov 23 '16 at 10:47

How to prevent HTML rendering when not visible data-binding

1 Answers1