How to prevent HTML rendering when not visible data-binding - html

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">
×
</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

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">
×
</button>
</div>
<!-- /ko -->
</div>