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

Question

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

敲除提供任何方式来有条件地设置属性？ （不理想的情况下有条件地呈现整个元素开始标记......）

[注]此类似命名的问题其实是淘汰赛的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> 

这是说，始终更新“文本”属性，并增加了“价值”属性，但只能加“选择”，如果该数据已经拥有“选择”中定义的值。

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

我希望我可以刚刚回复@gbs，但我不能。我的解决方案应该是有两个相同的HTML元素，一个具有属性，一个没有，还有一个挖空条件可以根据元素添加一个。我也知道这个定制的标准，但哪个解决方案更有效率？

Answer 4

Knockout的“attr”数据绑定确实支持这种情况，只是从getDisabledState（）函数返回null或undefined，那么它不会发射该属性。

这个答案是从Knockout attr binding with attributes like 'readonly' and 'disabled'