61

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

淘汰赛是否提供任何有条件地设置属性的方法？（理想情况下没有条件渲染整个元素的开始标签......）

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

4

4 回答 4

97

我在选择一个<option>（我手动生成而不是内置淘汰赛）时需要这个。

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

这表示始终更新“文本”属性并添加“值”属性，但只有在数据已经定义了“选定”值时才添加“选定”。

于 2013-05-30T16:22:53.943 回答
29

您可以创建一个自定义绑定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>
于 2012-10-18T21:14:36.843 回答
8

Knockout 的“attr”数据绑定确实支持这种情况，只是从您的 getDisabledState() 函数返回 null 或 undefined 然后它不会发出该属性。

此答案是从具有“只读”和“禁用”等属性的 Knockout attr 绑定中检索到的

于 2013-07-25T18:57:07.123 回答
2

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

于 2012-10-25T12:28:22.580 回答