Loại bỏ văn bản mặc định khi `foreach` trống

Question

Ghi nhớ rằng similar questions have been answered here, tôi đã tự hỏi làm thế nào người ta có thể đi về việc có văn bản mặc định hoặc hiển thị HTML bên trong Knockout data-bind='foreach: list' bất cứ khi nào danh sách trống.

Các giải pháp trên trang liên kết không có vẻ khá lên đường với điều này, và trong mọi trường hợp, tôi nghĩ một cách khác để cố gắng thực hiện điều này với một phong tục ràng buộc như thế này:

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); 
    } 
} 

này dường như hoạt động tốt với các quan sát đơn giản nhưng nó không hoạt động với ràng buộc foreach, mặc dù trong bất kỳ trường hợp nào tôi nghĩ đề xuất extender trong liên kết trên có lẽ thích hợp hơn vì một vài lý do - mã trên sẽ có một số cảnh báo. Tuy nhiên, tôi đã ném ví dụ này ở đây bởi vì nó hơi nổi bật một sự thay thế và thức ăn cho sự suy nghĩ.

Tất cả những gì được nói, tôi muốn biết tùy chọn nào có thể cung cấp mặc định thay cho nội dung foreach.

Một là để cung cấp một wrapper một cách đơn giản if, như thế này:

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

Tuy nhiên đây không phải là đặc biệt thanh lịch - rất nhiều mã lộn xộn.

Answer 1

Knockout cung cấp cho bạn if và ifnot ràng buộc. Bạn chỉ cần lùi lại một chút từ phần tử với foreach; Bên trong của nó chỉ dành cho mỗi phần tử, vì vậy khi không có phần tử nào, không có bất kỳ phần bên trong nào.

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

Biên tập: Câu hỏi của bạn rất quan trọng vì danh sách rỗng là một cơ hội để nói điều gì đó thay vì hiển thị blank slate.

Answer 2

Các Knockout 3 mở rộng Knockout Punches cung cấp một handler mặc định mà có thể được sử dụng một cái gì đó như thế này:

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

More đọc: KO Punches Documentation

Answer 3

Tôi biết bạn đã yêu cầu nó từ lâu rồi, nhưng có lẽ ngày nay nó có thể giúp ai đó; Nếu bạn làm điều đó với một mảng quan sát hoặc có thể quan sát được (như kết quả lọc từ danh sách), giải pháp trên sẽ không hoạt động.

Bạn có thể sử dụng phương pháp này để buộc KO phải trải qua điều này và xem liệu nó có thay đổi hay không bằng cách sử dụng "with". Bên trong vòng lặp đó, bạn nên kiểm tra độ dài dữ liệu $, nếu đó là 0, không có dữ liệu để lặp lại;)

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