knockout.js - IE -7 css class Số phát hành

Question

Dưới đây là một vấn đề nhỏ buồn cười tôi đã đi qua với tự động thiết lập lớp cho một mảng các div.

Sử dụng Knockout.js tôi đang chỉ định các lớp được sử dụng thông qua liên kết 'attr'.

này hoạt động tốt trên mọi trình duyệt tôi đã thử nghiệm trừ IE-7 (Không lo lắng về IE 6 vv)

Tôi có một ví dụ jsfiddle nêu bật những issue here

Trong ví dụ này các tĩnh (top hàng) phải khớp với phần dưới cùng (ko tạo) Trong IE-7 tôi chỉ thấy màu chọn css rộng nhất (Bạc)

Answer 1

IE7 yêu cầu bạn đặt className thay vì class.

Ví dụ, công trình này trong IE7 và các trình duyệt khác: http://jsfiddle.net/thirtydot/VVuGh/14/

<div data-bind='attr: { "class": classes, "className": classes }'></div> 

Tuy nhiên, hỗ trợ cho những đứa IE7 này nên lý tưởng không trong HTML của bạn. Bên trong knockout.js sẽ là một nơi tốt hơn, mặc dù tôi không biết gì về thư viện để có thể đưa ra đề xuất như vậy.

Answer 2

Nếu không thể xác định tên lớp học của bạn khi tạo mẫu (tức là nó là một phần của mô hình của bạn), bạn có thể tạo custom binding.

Nội dung của init/update bạn phương pháp sẽ chỉ cần đặt tên lớp cho element dựa trên những gì được trả về bởi các valueAccessor. Đối với một ví dụ đơn giản, bạn có thể làm (sử dụng jQuery):

ko.bindingHandlers.yourBindingName = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     // This will be called when the binding is first applied to an element 
     // Set up any initial state, event handlers, etc. here 

     $(element).addClass(valueAccessor()); 

    }, 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     // This will be called once when the binding is first applied to an element, 
     // and again whenever the associated observable changes value. 
     // Update the DOM element based on the supplied values here. 

    } 
}; 

Bạn có thể xây dựng một phức tạp hơn ràng buộc dựa trên loại trực tiếp css binding.