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

Posted 2023-03-27

【中文标题】有条件地在 knockout.js 中添加元素属性

【英文标题】：Conditionally add an element attribute in knockout.js

【发布时间】：2012-10-09 09:43:45

【问题描述】：

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

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

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

【问题讨论】：

我认为如果 observable 返回 null 是默认行为，但我可能是错的。请问你为什么需要在空值的情况下显式不设置属性而不是title=""？

【参考方案1】：

我在选择 <option> 时需要这个（我是手动生成的，而不是内置的剔除）。

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

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

【讨论】：

所以基本上把'null'作为属性值，它不会渲染属性，很好！

这应该是经过验证的答案。它以最简单的方式完美回答了问题。

我同意这应该是公认的答案。虽然创建自定义绑定绝对可行，但这更简单，并且更直接地解决了提出的问题。

如果您的逻辑很简单，则非常干净的解决方案。投票。

【参考方案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>

【讨论】：

很棒但有一个严重的问题——如果我有除“title”之外的属性并且我不希望 _if 应用于它... _if 仍然会。尽管如此，代码的想法还是不错的。

您始终可以使用 ko 标准 'attr' 绑定（不受 _if 标志影响）添加其他属性。示例：data-bind="attrIf: title: title, _if: flag, attr: otherAttr: val"

我建议在底部的删除周围有更多的逻辑......如果你想有条件地覆盖元素上已经存在的属性，这个答案不起作用。图片如下

【参考方案3】：

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

此答案取自Knockout attr binding with attributes like 'readonly' and 'disabled'

【参考方案4】：

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

【讨论】：

如果同一个元素有 5 个不同的属性，你会怎么做？很多有趣的观点......