Warunkowo dodaj atrybut elementu w knockout.js

Question

Biblioteka knockout.js ma "attr" data binding, która umożliwia dynamiczną zmianę wartości atrybutu elementu HTML (np. "Tytuł"). Jednak w niektórych przypadkach atrybut może lub nie może być potrzebny w zależności od odpowiedniego obserwowanego obiektu związanego. Na przykład, jeśli mój model ma "obserwowany" tytuł, mogę chcieć ustawić atrybut "title", jeśli jest obecny (nie-pusty) lub całkowicie pominąć atrybut, jeśli nie jest obecny (null).

Czy nokaut zapewnia jakiś sposób warunkowego ustawienia atrybutu? (Najlepiej bez warunkowo renderowania cały element otwierający znacznik ...)

[Uwaga] To podobnie nazwane pytanie zostało faktycznie rozwiązany przez nokaut w specjalnej obsługi klas CSS i nie odnosi się do tej kwestii (lub własny tytuł) : How to conditionally render an css class with knockoutjs

Answer 1

Potrzebowałem tego przy wyborze (generowałem ręcznie zamiast wbudowanego nokautu).

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

to mówi zawsze zaktualizować atrybut „Tekst” i dodać atrybut „value”, ale dodać „wybrany” tylko wtedy, gdy dane już ma wartość „wybrany” zdefiniowane.

Answer 2

można tworzyć niestandardowe wiążącej attrIf który będzie sprawdzić wartość określonej obserwowalnym logiczną przed dodawać lub nie atrybuty. Zobacz ten przykład:

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

Chciałbym móc odpowiedzieć na @gbs, ale nie mogę. Moim rozwiązaniem byłoby posiadanie dwóch tego samego elementu HTML, jednego z atrybutem, jednego bez i warunku nokautu, aby dodać jeden z nich zgodnie z elementem. Wiem również o tym niestandardowym dopasowywaniu, ale które z rozwiązań jest bardziej wydajne?

Answer 4

wiązania danych „attr” knockout za obsługuje ten scenariusz po prostu zwróci null lub undefined z getDisabledState funkcji(), to nie będzie emitować atrybut.

Ta odpowiedź została pobrana z Knockout attr binding with attributes like 'readonly' and 'disabled'