Knockout attr ràng buộc với các thuộc tính như 'readonly' và 'khuyết tật'

Question

gì là "thực hành tốt nhất" cách gợi ý để sử dụng Knockout của "attr" dữ liệu ràng buộc với các thuộc tính độc lập như "readonly" và "tàn tật"?

Những thuộc tính này là đặc biệt ở chỗ chúng thường được kích hoạt bằng cách thiết lập giá trị thuộc tính với tên thuộc tính (mặc dù nhiều trình duyệt hoạt động tốt nếu bạn chỉ đơn giản bao gồm các tên thuộc tính mà không cần bất kỳ giá trị trong HTML):

<input type="text" readonly="readonly" disabled="disabled" value="foo" /> 

Tuy nhiên, nếu bạn không muốn những thuộc tính này được áp dụng, việc thực hành nói chung là chỉ cần bỏ qua chúng hoàn toàn từ HTML (như trái ngược với làm một cái gì đó giống như readonly = "false"):

<input type="text" value="foo" /> 

Ràng buộc dữ liệu "attr" của Knockout không hỗ trợ trường hợp này. Ngay sau khi tôi cung cấp tên thuộc tính, tôi cũng cần phải cung cấp một giá trị:

<input type="text" data-bind="attr: { 'disabled': getDisabledState() }" /> 

Có cách nào để tắt trình duyệt chéo 'bị tắt' hoặc 'chỉ đọc'? Hoặc là có một thủ thuật với ràng buộc tùy chỉnh mà tôi có thể sử dụng để không hiển thị bất cứ điều gì nếu tôi không muốn mục bị vô hiệu hóa hoặc chỉ đọc?

Answer 1

Ràng buộc dữ liệu "attr" của Knockout hỗ trợ kịch bản này chỉ trả lại null hoặc undefined từ chức năng getDisabledState() của bạn sau đó nó sẽ không phát ra thuộc tính.

Demo Fiddle.

Answer 2

Knockout có gắn kết enable cũng như ràng buộc disable.

Tôi không chắc chắn nếu các tính năng này có sẵn khi câu hỏi được hỏi, nhưng bất kỳ ai đề cập đến vấn đề này nên lưu ý.

Answer 3

Bạn cũng có thể tạo ra một ràng buộc cho readonly như thế này:

ko.bindingHandlers['readonly'] = { 
'update': function (element, valueAccessor) { 
    var value = ko.utils.unwrapObservable(valueAccessor()); 
    if (!value && element.readOnly) 
     element.readOnly = false; 
    else if (value && !element.readOnly) 
     element.readOnly = true; 
} 
}; 

Nguồn: https://github.com/knockout/knockout/issues/1100