Knockout.js thay đổi màu sắc <option> khi sử dụng liên kết 'tùy chọn'?

Question

Có thể thay đổi kiểu dáng (sử dụng 'kiểu' hoặc 'css' ràng buộc) của phần tử tùy chọn của danh sách lựa chọn khi sử dụng 'tùy chọn' ràng buộc trên danh sách chọn không? Hoặc điều này chỉ có thể được thực hiện bằng cách sử dụng một 'foreach' trên danh sách lựa chọn và thay đổi kiểu dáng cho mỗi?

Tôi có điều này trong mã:

<select id="components-select" size="4" name="components-select" 
         data-bind=" options: combinedComponents, 
            optionsText: 'displayName', 
            optionsValue: 'id', 
            value: chosenComponent"></select> 

nhưng nếu tôi thêm sau đó toàn bộ danh sách được màu đỏ nếu isDefault lợi nhuận sai.

là cách duy nhất để đạt được điều này để mã hóa nó theo cách này:

<select id="components-select" size="4" name="components-select" 
         data-bind="foreach: combinedComponents"> 
    <option data-bind="value: id, text: displayName, style: {color: isDefault() === true ? 'black' : 'red'}"></option> 
</select> 

Hoặc là có một số hình thức Knockout.js ma thuật mà tôi không biết?

Cảm ơn!

Answer 1

Để trả lời câu hỏi của bạn, có đó là cách tốt nhất tôi tin.

với mã style: {color: isDefault() === true ? 'black' : 'red'} bạn ràng buộc (thêm) kiểu cho phần tử DOM được liên kết. Trong trường hợp này, toàn bộ thẻ <select>. Không phải là một thẻ <option> như bạn muốn. Đó là lý do tại sao toàn bộ màu thay đổi danh sách của bạn.

Hãy xem knockoutjs docs để biết thêm thông tin về ràng buộc kiểu.

Answer 2

Để mở rộng về câu trả lời Thomas Wiersema của, cách bạn muốn tiếp cận xử lý mà trên một cơ sở cho mỗi hàng là một cái gì đó như:

<select id="components-select" size="4" name="components-select" 
        data-bind="foreach: combinedComponents"> 
<option data-bind="value: id, text: displayName, style: {color: getColorFor.call(null, $data) }"></option> 
</select> 

sau đó, trong JavaScript, đính kèm một chức năng để đối tượng cha mẹ của bạn như vậy (tôi đang làm cho một số giả định, tất nhiên, giống như đối tượng cha mẹ của bạn được gọi là vm và isDefault thuộc về một combinedComponent):

vm.getColorFor = function(component) { 
    return component.isDefault() === true ? 'black' : 'red'; 
} 

Nếu bạn không chắc chắn những gì call không, hãy kiểm tra bind vs apply vs call

Tôi hy vọng điều đó sẽ giúp - hãy cho tôi biết nếu tôi có thể xây dựng!

Answer 3

Để thêm những gì đã được nói, có một tính năng của Knockout mà tôi thấy bị bỏ qua rất nhiều và rất tiện dụng trong các trường hợp sau: $index. Ví dụ, tôi đang tạo danh sách nơi tôi muốn tùy chọn đầu tiên trong danh sách có màu đen và phần còn lại là màu đỏ. Vì vậy, tôi chỉ có thể sửa đổi những gì bạn có như lựa chọn thứ hai của bạn như vậy:

<select id="components-select" size="4" name="components-select" data-bind="foreach: combinedComponents"> <option data-bind="value: id, text: displayName, style: {color: $index === 0 ? 'black' : 'red'}"></option> </select>

Hoặc nếu bạn muốn màu sắc thay thế chỉ cần sử dụng một tấm séc mô đun.

<select id="components-select" size="4" name="components-select" data-bind="foreach: combinedComponents"> <option data-bind="value: id, text: displayName, style: {color: $index % 2 === 1 ? 'black' : 'red'}"></option> </select>