Khớp nối kiểu Knockout: firefox không đặt màu nền?

Question

Khi tôi cố gắng để thay đổi màu nền của một hộp nhỏ bằng cách sử dụng style knockout.js ràng buộc:

<input class="biggerBox" type="text" data-bind="value: colorText, valueUpdate: 'afterkeydown'" /> 
<div class="littleBox" data-bind="style: {'background-color': colorText}"></div> 

và trong js:

var viewModel = { 
    colorText: ko.observable('rgba(80, 120, 160, 1)') 
}; 
ko.applyBindings(viewModel); 

nó hoạt động giống như tôi mong đợi trong Chrome và Safari, màu nền của hộp nhỏ thay đổi khi tôi nhập văn bản vào hộp nhập liệu. Nhưng không phải trong Firefox 24.0 trên máy Mac; colorText có thể quan sát được, nhưng màu nền không bao giờ được đặt. Tuy nhiên, nếu tôi cố gắng thay đổi màu nền trước, nó sẽ hoạt động trên tất cả Chrome, Safari và Firefox. Tôi chưa thử IE.

Tôi có hiểu nhầm chương trình ở đây không? Hay đây có phải là lỗi knockout.js không? Hoặc một lỗi Firefox? Nó dường như không có bất cứ điều gì để làm với How to use the style data bindings?

jsfiddle here

Answer 1

Bạn nên sử dụng backgroundColor thuộc tính thay vì background-color.

Sống Demo.

Đây không phải là điều cụ thể của Knockout. Như có thể thấy trong the relevant KO source code file, các bộ ràng buộc kiểu như thế này:

element.style[styleName] = styleValue || "";

Firefox xử lý element.style[...] cú pháp này khác với Chrome, như có thể thấy nếu bạn gõ như sau trong cả hai giao diện điều khiển cửa sổ:

document.body.style['background-color'] = 'red' 

Tính năng này hoạt động trong Chrome chứ không phải trong Firefox. (Thú vị, nó cũng hoạt động trong IE11.)

Answer 2

Sử dụng cú pháp thay thế để xác định tên lớp CSS hoạt động trong Firefox:

<div class="littleBox" data-bind="style: {backgroundColor: colorText}"></div> 

Để tìm hiểu lý do xem mã nguồn sẽ là cần thiết.