Liaison attr Knockout avec des attributs tels que "lecture seule" et "désactivé"
Quelle est la "meilleure pratique" suggérée pour utiliser liaison de données "attr" de Knockout avec des attributs autonomes comme "readonly" et "disabled"?
Ces attributs sont spéciaux en ce qu'ils sont généralement activés en définissant la valeur d'attribut sur le nom d'attribut (bien que de nombreux navigateurs fonctionnent correctement si vous incluez simplement les noms d'attribut sans aucune valeur dans le HTML):
<input type="text" readonly="readonly" disabled="disabled" value="foo" />
Cependant, si vous ne faites pas voulez que ces attributs soient appliqués, la pratique générale est de simplement les omettre complètement du HTML (au lieu de faire quelque chose comme readonly = "false"):
<input type="text" value="foo" />
La liaison de données "attr" de Knockout ne prend pas en charge ce scénario. Dès que je donne un nom d'attribut, je dois également fournir une valeur:
<input type="text" data-bind="attr: { 'disabled': getDisabledState() }" />
Existe-t-il un moyen multi-navigateurs de désactiver "désactivé" ou "lecture seule"? Ou y a-t-il une astuce avec liaison personnalisée que je peux utiliser pour ne pas rendre quoi que ce soit si je ne veux pas que l'élément soit désactivé ou rendu en lecture seule?
La liaison de données "attr" de Knockout prend en charge ce scénario, il suffit de renvoyer null ou undefined à partir de votre fonction getDisabledState(), alors il n'émettra pas l'attribut.
Démo Fiddle .
Vous pouvez également créer une liaison pour lecture seule comme ceci:
ko.bindingHandlers['readonly'] = {
'update': function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
if (!value && element.readOnly)
element.readOnly = false;
else if (value && !element.readOnly)
element.readOnly = true;
}
};