Текст нокаута по умолчанию, когда `foreach` пуст

Принимая во внимание, что здесь были ответы на подобные вопросы, мне было интересно, как можно было бы использовать текст по умолчанию или отображение HTML внутри нокаута data-bind='foreach: list' всякий раз, когда список пуст.

Решения на связанной странице не совсем совпадают с этим, и в любом случае я думал о другом способе попытаться выполнить это с помощью настраиваемой привязки, например:

text.default = {
  update: function (element, valueAccessor) {
      var $e = $(element),
          obs = valueAccessor();

      function _check_blank() {
         // the element has content - so we do nothing
         if ($e.text().trim()) {
            return;
         }
         // the element is empty;
         $e.text("Default Text")
      }
      // we use setTimeout to ensure that any other bindings complete 
      // their update
      setTimeout(_check_blank, 0);
  }
}

Это, по-видимому, хорошо работает с простыми наблюдаемыми, но не работает с привязкой foreach, хотя в любом случае я думаю, что предложение extender в приведенной выше ссылке, вероятно, предпочтительнее по нескольким причинам - выше код будет иметь ряд предостережений. Тем не менее, я бросил этот пример здесь, потому что он несколько выделяет альтернативу и пищу для размышлений.

Все, что было сказано, я хотел бы знать, какие варианты могут быть для предоставления значения по умолчанию вместо foreach.

Один из них - предоставить оболочку в простой if, например:

<!-- ko if: xyz().length -->
   // foreach
<!-- /ko -->
<!-- ifnot: xyz().length -->
   // default text
<!-- /ko -->

Однако это не особенно изящно - много беспорядка кода.

Ответы

Ответ 1

Нокаут дает вам привязки if и ifnot. Вам просто нужно немного отступить от элемента с помощью foreach; Его внутренности предназначены только для каждого элемента, поэтому, когда их нет, нет никаких внутренних объектов.

<div data-bind="if: pets().length > 0">These are the pets:</div>
<div data-bind="if: pets().length == 0">There aren't any pets. To add a pet...</div>
<div data-bind="foreach: pets">

Редакция: ваш вопрос важен, потому что пустые списки - это возможность сказать что-то, а не показывать чистый слайс.

Ответ 2

Расширение "Нокаут 3" "Нокаутные удары" предоставляет обработчик по умолчанию, который можно использовать примерно так:

<span data-bind="text: name | default:'Nobody'"></span>

Дополнительная информация: Документация KO Punches

Ответ 3

Я знаю, что вы давно это задали, но, может быть, сегодня это может помочь кому-то; Если вы сделаете это с наблюдаемым массивом или зависимым наблюдаемым (например, результаты фильтра из списка), вышеупомянутое решение не будет работать.

Вы можете использовать этот метод, чтобы заставить KO пройти через это наблюдаемое и посмотреть, изменилось ли оно с помощью "с". Внутри этого цикла вы должны проверить длину $data, если это 0, нет данных для цикла;;

<!--ko with: xyz -->
  <div class="nodata" data-bind="visible:$data.length==0">
     Sorry, no data
  </div>
<!--/ko-->