KnockoutJS- Show message when foreach has no result - data-binding

Question

One of the web pages is showing products using databind:foreach
Here is the piece of code
<div class="product-list">
<ul data-bind="foreach: products">
<li>
<div class="product-summary">
<div class="photo">
<a data-bind="attr:{href: Link}">
<img data-bind="attr:{src: SummaryImageUrl, title: DisplayName}" alt="product image" />
</a>
</div>
<div class="product-info">
<h4 class="product-title" data-bind="attr:{title: DisplayName}">
<a data-bind="attr:{href: Link}, text: DisplayName"></a>
</h4>
<!-- ko if: Brand-->
<div data-bind="html: Brand" class="product-brand"></div>
<!-- /ko-->
<!-- ko ifnot: Brand-->
<div class="product-brand"> </div>
<!-- /ko -->
I want to show a message if there is no product.Hence, added a line as below:
<div data-bind="visible:products().length==0">
No product(s) found.
</div>
<div class="product-list">
<ul data-bind="foreach: products">
<li>
Now when page is loading, it shows No products found and then hides it and renders whole products
Could you please help?

Answer 1

The problem is when the data for the products is loaded compared to when it gets rendered on to the screen. I imagine what is happening is that there is a process to retrieve the products from the server, while that is happening the screen is rendered and bound to the view model, resulting in the No Products Found being displayed. then at some unspecified time later the products get loaded and the screen gets updated with the new data. I think what you probably need is a flag to indicate when a search is being performed, and when its finished. this will allow you to show and hide the rendering of the results when the results are known.
<div data-bind="visible: showResults">
<div data-bind="visible:products().length==0">
No product(s) found.
</div>
<div class="product-list">
<ul data-bind="foreach: products">
<li></li>
</ul>
</div>
</div>

Answer 2

I would created an observable flag to notify if data is loaded and then wrap your html in ko virtual binding as shown in following code snippet.
function viewModel() {
var self = this;
self.products = ko.observableArray([]);
self.isDataLoaded = ko.observable(false);
self.loadData = function(){
setTimeout(function(){
self.products.push({name:"A"});
self.products.push({name:"B"});
self.products.push({name:"C"});
self.products.push({name:"D"});
self.isDataLoaded(true);
}, 2000);
}
}
var vm = new viewModel();
vm.loadData();
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--ko if:isDataLoaded-->
<div class="product-list">
<ul data-bind="foreach: products">
<li data-bind="text:name"></li>
</ul>
</div>
<div data-bind="visible:products().length==0">
No product(s) found.
</div>
<!-- /ko -->