Làm thế nào để tạo mẫu cấu trúc If-Else trong dạng xem giới hạn dữ liệu?

Tôi liên tục thấy mình sử dụng thành ngữ này trong các mẫu HTML dựa trên KO:

<!-- ko if: isEdit -->
<td><input type="text" name="email" data-bind="value: email" /></td>
<!-- /ko -->
<!-- ko ifnot: isEdit -->
<td data-bind="text: email"></td>
<!-- /ko -->

Có một tốt hơn / sạch hơn cách để làm điều kiện trong KO, hoặc là có một tốt hơn phương pháp hơn là chỉ sử dụng truyền thống if-else cấu trúc?

Ngoài ra, tôi chỉ muốn chỉ ra rằng một số phiên bản của Internet Explorer (IE 8/9) không phân tích cú pháp ví dụ trên một cách chính xác. Vui lòng xem câu hỏi SO này để biết thêm thông tin. Tóm tắt nhanh là, không sử dụng chú thích (liên kết ảo) bên trong thẻ bảng để hỗ trợ IE. Sử dụng tbodythay thế:

<tbody data-bind="if: display"><tr><td>hello</td></tr></tbody>

Có một số cách khác nhau để bạn có thể xử lý loại mã này.

• với sự kết hợp if / ifnot như hiện tại. Điều này hoạt động tốt và không quá dài dòng.

• Chuyển đổi / liên kết trường hợp của Michael Best ( https://github.com/mbest/knockout-switch-case ) khá linh hoạt và có thể cho phép bạn dễ dàng xử lý điều này và những thứ phức tạp hơn (nhiều trạng thái hơn đúng / sai).

• Một tùy chọn khác là sử dụng các mẫu động. Bạn sẽ liên kết một vùng với một hoặc nhiều mẫu với tên mẫu được sử dụng dựa trên một vùng có thể quan sát được. Đây là một bài mà tôi đã viết về chủ đề này một thời gian trở lại đây: http://www.knockmeout.net/2011/03/quick-tip-dynamently-changed.html . Trong trường hợp của bạn, nó có thể giống như sau:

<td data-bind="template: $root.getCellTemplate"></td>

<script id="cellEditTmpl" type="text/html">
    <input type="text" name="email" data-bind="value: email" />
</script>

<script id="cellTmpl" type="text/html">
    <span data-bind="text: email"></span>
</script>

Các getCellTemplatechức năng có thể sống bất cứ nơi nào, nhưng sẽ được trao mục ($ data) như là đối số đầu tiên và sẽ quay trở lại tên của mẫu để sử dụng.

Một cách tiếp cận là sử dụng các mẫu được đặt tên (có thể hỗ trợ truyền đối số):

<!-- ko template: isEdit() ? 'emailEdit' : 'emailDisplay' --><!-- /ko -->
<script id="emailEdit" type="text/html">
    <td><input type="text" name="email" data-bind="value: email" /></td>
</script>
<script id="emailDisplay" type="text/html">
    <td data-bind="text: email"></td>
</script>

Một tùy chọn khác là sử dụng plugin chuyển đổi / trường hợp của tôi , sẽ hoạt động như sau:

<!-- ko switch -->
    <!-- ko case: isEdit -->
        <td><input type="text" name="email" data-bind="value: email" /></td>
    <!-- /ko -->
    <!-- ko case: $else -->
        <td data-bind="text: email"></td>
    <!-- /ko -->
<!-- /ko -->

Để tránh tính toán lại ràng buộc loại trực tiếp khi sử dụng kết hợp if: / ifnot: bạn có thể sử dụng chúng cùng với cấu trúc 'with:'

    <!-- ko with: $data.DoSomePerformanceCriticalWork($data.SomeParameter()) -->
        <!-- ko if: $data.Condition() -->
           ... some markup ...
        <!-- /ko -->
        <!-- ko ifnot: $data.Condition() -->
           ... some markup ...
        <!-- /ko -->
    <!-- /ko -->

Bây giờ cũng có knockout-elseràng buộc / plugin (mà tôi đã viết để giải quyết vấn đề này).