有条件地在knockout.js中添加一个元素属性

Question

knockout.js库有一个"attr"数据绑定,允许您动态更改HTML元素属性的值(例如"标题").但是,在某些情况下,取决于绑定对象上的相应可观察对象,可能需要也可能不需要该属性.例如,如果我的模型有一个"标题"可观察,我可能想要设置"title"属性(如果它存在(非空))或完全跳过该属性(如果它不存在(null)).

knockout是否提供了有条件地设置属性的方法？(理想情况下,无需有条件地渲染整个元素的开放标记......)

[注意]这个类似命名的问题实际上是通过敲除特殊处理CSS类来解决的,并不涉及这个问题(或它自己的标题):如何使用knockoutjs有条件地呈现一个css类

Answer 1

我选择的时候需要这个(我手动生成而不是内置的淘汰赛).

<option 
 data-bind="text: text, 
    attr:{
     value:value,
     'selected': typeof(selected) !== 'undefined' ? selected : null 
     }">
 Choice X
</option>

这表示总是更新'text'属性并添加'value'属性,但只有在数据已经定义了'selected'值时才添加'selected'.

Answer 2

您可以创建自定义绑定attrIf,它将在添加或不添加属性之前检查特定可观察布尔值的值.看这个例子:

ko.bindingHandlers.attrIf = {
    update: function (element, valueAccessor, allBindingsAccessor) {
        var h = ko.utils.unwrapObservable(valueAccessor());
        var show = ko.utils.unwrapObservable(h._if);
        if (show) {
            ko.bindingHandlers.attr.update(element, valueAccessor, allBindingsAccessor);
        } else {
            for (var k in h) {
                if (h.hasOwnProperty(k) && k.indexOf("_") !== 0) {
                    $(element).removeAttr(k);
                }
            }
        }
    }
};

<a href="#" data-bind="attrIf: {title: title, _if: flag}">link</a>

Answer 3

Knockout的"attr"数据绑定确实支持这种情况,只需从getDisabledState()函数返回null或undefined,然后它就不会发出该属性.

这个答案是从Knockout attr绑定中检索到的,其中包含'readonly'和'disabled'等属性