Question

对于某些属性，存在具有效果的属性 - 分配给它的值无关紧要。例如，autofocus属性可以设置为“false”或“true”或“banana”，并且元素仍然会自动聚焦。 IE，以下都是等效的，并使div得到焦点：

<div autofocus="false" contenteditable="true"></div>
<div autofocus="true" contenteditable="true"></div>
<div autofocus="banana" contenteditable="true"></div>

Knockout有一个'attr'绑定，但它似乎只对将值赋值给属性有用，而不是用于添加/删除属性。

还有其他方法可以在淘汰赛中完成，或者我是否被迫从javascript中设置它？

NB在ubuntu上使用chrome。

Answer 1

使用布尔值false删除属性，使用字符串＆＃39; false＆＃39;设置属性。你还需要什么？

例如：

// Set as boolean, removes the attribute
autofocus(false);   

// Set as boolean, adds the attribute
autofocus(true);  

// Set as string, adds the attribute
autofocus('false');   

// Set as string, adds the attribute
autofocus('true');

请点击此处查看示例：http://jsfiddle.net/badsyntax/XMDFh/

Answer 2

您可以使用hasfocus敲除绑定：

<input data-bind="hasfocus: isSelected" />

在此处阅读更多内容：http://knockoutjs.com/documentation/hasfocus-binding.html

Answer 3

您可以编写一个使用jquery删除属性的kohandler。

Answer 4

Knockout中没有添加或删除属性的本机绑定，只是为了设置属性。

hasFocus绑定展示其行为的原因是因为它使用元素的原生.focus()和.blur()方法来添加或移除焦点。

之前已经报道过难以管理非布尔属性的Knockout，这里是迈克尔·贝斯特提到它不会被解决的一个例子：

https://github.com/SteveSanderson/knockout/issues/391

更新：

您可以沿着这些行创建绑定处理程序：

ko.bindingHandlers.toggleAttr = {    
    update: function (element, valueAccessor) {    
        var options = ko.utils.unwrapObservable(valueAccessor());
        var attr = ko.utils.unwrapObservable(options.attr);
        var param = ko.utils.unwrapObservable(options.param);

        param ? element.setAttribute(attr, true) : element.removeAttribute(attr);        
    }
};

这将允许您这样做：

<input data-bind="toggleAttr: { attr: 'autofocus', param: focusMe }" />

这是一个小提琴：http://jsfiddle.net/nathanjones/9EzBD/

使用布尔属性'autofocus'在knockout中使用attr绑定

4 个答案: