KnockoutJS - Показать сообщение, когда foreach не имеет результата - PullRequest
Новая
       20

KnockoutJS - Показать сообщение, когда foreach не имеет результата

0 голосов
/ 12 декабря 2018

На одной из веб-страниц показаны продукты с использованием 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, а затем скрывает ее и отображает целые продукты

Не могли бы вы помочь?

Ответы [ 2 ]

0 голосов
/ 13 декабря 2018

Я бы создал наблюдаемый флаг для уведомления, если данные загружены, а затем обернул ваш HTML в виртуальную привязку ко, как показано в следующем фрагменте кода. 

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 -->
0 голосов
/ 12 декабря 2018

Проблема заключается в том, что данные для продуктов загружаются по сравнению с тем, когда они отображаются на экране.Я предполагаю, что происходит то, что есть процесс для извлечения продуктов с сервера, в то время как это происходит, экран отображается и привязывается к модели представления, в результате чего отображается 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>
...