Data binding KnockoutJS-当foreach没有结果时显示消息

其中一个网页正在使用

databind:foreach

这是一段代码

      <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">&nbsp;</div>
                        <!-- /ko -->

如果没有产品，我想显示一条消息。因此，添加了一行，如下所示：

   <div data-bind="visible:products().length==0">
        No product(s) found.
    </div>

    <div class="product-list">
        <ul data-bind="foreach: products">
            <li>

未找到任何产品。

现在，当页面加载时，它会显示

未找到任何产品

，然后将其隐藏并呈现整个产品

---

能否请您提供帮助？

问题在于，与在屏幕上呈现时相比，产品的数据何时加载。我想象现在发生的是，有一个从服务器检索产品的过程，在这个过程中，屏幕被渲染并绑定到视图模型，导致显示

找不到产品。然后在某个未指定的时间，产品被加载，屏幕被更新为新数据。我认为您可能需要一个标志来指示何时执行搜索以及何时完成搜索。这将允许您在结果已知时显示和隐藏结果的渲染

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


未找到任何产品。



我会创建一个可观察的标志来通知是否加载了数据，然后将html包装到虚拟绑定中，如下面的代码片段所示


函数viewModel（）{
var self=这个；
self.products=ko.observearray（[]）；
self.isDataLoaded=ko.可观察（假）；
self.loadData=函数（）{
setTimeout（函数（）{
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.应用绑定（vm）




未找到任何产品。