Question

其中一个网页正在使用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>

现在，当页面加载时，它会显示No products found，然后将其隐藏并呈现整个产品

能请你帮忙吗？

Answer 1

问题是与将产品的数据呈现到屏幕上相比，何时加载产品的数据。我想象发生了什么事，有一个从服务器检索产品的过程，同时正在渲染屏幕并将其绑定到视图模型，从而显示No Products Found。然后在未指定的时间之后加载产品，并使用新数据更新屏幕。我认为您可能需要一个标志来指示何时执行搜索以及何时完成搜索。这样一来，您就可以在已知结果的情况下显示和隐藏结果的呈现。

<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

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

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

KnockoutJS-在foreach没有结果时显示消息

2 个答案: