knockout.js - IE -7css类问题

Question

这是我在为div数组动态设置类时遇到的一个有趣的小问题。

使用Knockout.js，我分配了通过'attr‘绑定使用的类。

这在我测试过的除IE-7以外的所有浏览器中都工作得很好(不用担心IE-6等)

我有一个突出显示issue here的jsfiddle示例。

在示例中，静态(顶行)应该与IE-7中的底部(ko生成)匹配，我看到的是最宽的css选择器颜色(银色)

Answer 1

IE7要求您设置className而不是class。

例如，这可以在IE7和其他浏览器中工作：http://jsfiddle.net/thirtydot/VVuGh/14/

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

但是，理想情况下，您的IE7中不应该包含对此特性的支持。在knockout.js内部会是一个更好的地方，尽管我对能够提出这样一个建议的库一无所知。

Answer 2

如果在生成模板时无法确定您的类名(即它是模型的一部分)，您可以创建一个custom binding。

您的init / update方法的内容将根据valueAccessor返回的内容为element设置类名。举个简单的例子，你可以这样做(使用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.

    }
};

您可以基于敲除的css binding构建更复杂的绑定。