Question

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

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

[注意] 这个类似命名的问题实际上是通过敲除特殊处理CSS类来解决的，与此问题（或其自己的标题）无关：How to conditionally render an css class with knockoutjs

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 binding with attributes like 'readonly' and 'disabled'

中检索到的

Answer 4

我希望我能回复@gbs，但我不能。我的解决方案是拥有两个相同的HTML元素，一个具有属性，一个没有，以及根据元素添加其中一个的淘汰条件。我也知道这个定制的招标，但哪个解决方案更有效？

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

4 个答案: