bình luận foreach ràng buộc vs foreach ràng buộc trong knockoutjs

Question

Trong HTML của tôi, tôi có thể xác định những cam kết ràng buộc loại trực tiếp foreach:

<!-- ko foreach: customer --> 
    <div data-bind="text: id" /> 
<!-- /ko --> 

vs

<div data-bind="foreach: customer"> 
    <div data-bind="text: id" /> 
</div> 

Đâu là sự khác biệt giữa hai cách tiếp cận?

Answer 1

Sử dụng bản ràng buộc khi một mối quan hệ cha-con tồn tại trong phần ràng buộc, giống như một ul và li.

Sử dụng cú pháp nhận xét cho ràng buộc không chứa thùng khi phần ràng buộc của bạn không có mối quan hệ cha-con.

Trong ví dụ của bạn, bạn sử dụng khối mã đầu tiên vì bạn không cố gắng liên kết với cấu trúc cha-con. Tất cả những gì bạn muốn làm chỉ là kết nối dữ liệu khách hàng của bạn với div, bạn không cần phải tạo div cha và foreach thông qua khách hàng và nối thêm một div khác bên trong div cha. Đó là nhiều hơn bạn muốn làm.

Tốt sử dụng containerless ràng buộc

<!-- ko foreach: customer --> 
<section> 
    <p data-bind="text: customer.name"></p> 
    <p data-bind="text: customer.orderDate"></p> 
</section> 
<!-- /ko --> 

Tuy nhiên, nếu bạn có một danh sách ra lệnh bạn nên sử dụng mẹ đẻ ràng buộc bởi vì nó chỉ có ý nghĩa.

Native

<ol data-bind="foreach: customer"> 
    <li data-bind="text: customer.name"></li> 
</ol> 

Containerless

<ol> 
    <!-- ko foreach: customer --> 
     <li data-bind="text: customer.name"></li> 
    <!-- /ko --> 
</ol> 

Ví dụ thứ hai chỉ trông ngớ ngẩn. Bạn đang thêm phức tạp hơn cho một cái gì đó mà không nên phức tạp.

Answer 2

Trong một số trường hợp, bạn có thể muốn sao chép một phần của đánh dấu, nhưng bạn không có bất kỳ yếu tố container trên đó đặt một foreach ràng buộc

Để xử lý điều này, bạn có thể sử dụng cú pháp kiểm soát dòng chảy containerless , mà là dựa trên thẻ comment

chi tiết Mode trên The "foreach" binding, Note 4: Using foreach without a container element