knockoutjs attr 绑定和 IE7答案

【问题标题】：knockoutjs attr binding and IE7knockoutjs attr 绑定和 IE7
【发布时间】：2012-02-01 14:13:10
【问题描述】：

此语法适用于 FF

<input data-bind="checked: isRequest, attr: { name: 'id_' + id }" type="checkbox" />

但是在 IE7 中 name 属性没有渲染？

编辑： 其他属性，如标题有效，奇怪，但我需要 name 属性以便我可以发布数据：/

【问题讨论】：

你可能想把名字放在引号里：
没有工作.. 但是即使 jQUery 或互联网浏览器开发工具无法在其中看到名称 attr，当我查看请求时我也可以看到它：D
更多信息在这里：stackoverflow.com/questions/2105815/…
@Anders，我不明白——这对你来说仍然是个问题吗？
我知道有时属性本身需要用引号引起来，例如"attr: { 'name': 'id_' + id }"

标签： internet-explorer-7 knockout.js attr

【解决方案1】：

我在尝试使用 attr: { 'class': something, 'style': somethingElse} 时遇到了类似的问题，并放弃了尝试让 attr 绑定在 IE7 中工作。

工作是编写自定义绑定以手动应用 jquery：

ko.bindingHandlers.customCss = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var css = ko.utils.unwrapObservable(valueAccessor());
        $(element).addClass(css);
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
        var css = ko.utils.unwrapObservable(valueAccessor());
       $(element).addClass(css);
    }
};

因此，在您的情况下，我会尝试在 ko.applyBindings() 之前将以下内容添加到您的 document.ready 中：

ko.bindingHandlers.customName= {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var name= ko.utils.unwrapObservable(valueAccessor());
        $(element).attr('name', 'id_' + name);
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
        var name= ko.utils.unwrapObservable(valueAccessor());
        $(element).attr('name', 'id_' + name);
    }
};

然后将您的输入绑定为：

<input data-bind="checked: isRequest, customName: id }" type="checkbox" />

【讨论】：

在 IE7 中，您必须绑定 'className' 属性而不是 'class' 属性，但浏览器差异不应该是视图模型的工作，因此自定义绑定是抽象的好方法jQuery的浏览器知识
我将此标记为答案，但 addClass 在 MVVM 情况下并不总是最佳，请在 addClass jsfiddle.net/eZRQb 之前使用 removeClass 检查此小提琴以获取解决方案@

【解决方案2】：

我知道这很旧，但我找到了解决 IE6/7 问题的方法。通过查看他们的 'uniqueName' 绑定的最新敲除源找到了解决方案：

ko.bindingHandlers['uniqueName'] = {
    'init': function (element, valueAccessor) {
        if (valueAccessor()) {
            element.name = "ko_unique_" + (++ko.bindingHandlers['uniqueName'].currentIndex);

            // Workaround IE 6/7 issue
            // - https://github.com/SteveSanderson/knockout/issues/197
            // - http://www.matts411.com/post/setting_the_name_attribute_in_ie_dom/
            if (ko.utils.isIe6 || ko.utils.isIe7)
                element.mergeAttributes(document.createElement("<input name='" + element.name + "'/>"), false);
        }
    }
};

只需利用相同的机制来合并属性，这将具有与更改名称属性相同的效果，但以 IE6\7 友好的方式。

【讨论】：