Knock-out attr liaison avec des attributs comme "lecture seule" et "personnes handicapées"

Ce qui est suggéré de "meilleures pratiques" de façon à utiliser knock-out du "attr" liaison de données avec autonome des attributs comme "readonly" et "désactivé"?

Ces attributs sont spécial qu'ils sont généralement activée par le réglage de la valeur de l'attribut l'attribut nom (bien que de nombreux navigateurs fonctionnent très bien si vous suffit simplement d'inclure les noms d'attribut sans aucune valeurs dans le code HTML): 

<input type="text" readonly="readonly" disabled="disabled" value="foo" />

Toutefois, si vous ne pas voulez ces attributs pour être appliquée, la pratique générale est de simplement les ignorer complètement à partir du HTML (par opposition à faire quelque chose comme readonly="false"):

<input type="text" value="foo" />

Knock-out du "attr" liaison de données ne prend pas en charge ce scénario. Dès que j'ai de fournir un nom d'attribut, j'ai besoin de fournir une valeur ainsi:

<input type="text" data-bind="attr: { 'disabled': getDisabledState() }" />

Est là une manière de croix-navigateur de désactiver l'option "désactivé" ou "readonly'? Ou est-il un truc avec un liaison personnalisée que je peux utiliser pour ne pas rendre rien si je ne veux pas l'élément désactivé ou mis en lecture seule?

  • Je ne comprends pas, pourquoi vous avez besoin de fournir désactivé si vous n'avez pas désactivé pour le même spectacle?
  • L'exemple que j'ai donné est conçu pour simplement illustrer le problème. La question est: est-ce que certains attributs HTML sont autonomes attributs - ils n'ont pas vraiment besoin d'une valeur. Et si vous ne voulez pas de ces attributs pour influer sur le code HTML, puis il vous suffit de les omettre. Mais knock-out "de l'attribut" data-binding mécanisme ne prend pas en charge ce scénario.
InformationsquelleAutor Armchair Bronco | 2013-01-04
  1. 39

    Knock-out du "attr" liaison de données prend en charge ce scénario juste retour null ou undefined de votre getDisabledState() fonction ne sera pas émettre de l'attribut.

    Démo Violon.

    • Comment puis-je vérifier que l'attribut n'a pas été émise à l'aide de Firebug ou un outil similaire? Lorsque j'essaie d'afficher le "live" de HTML à partir de la démo de Violon au-dessus, je suis toujours de voir le knock-out de liaison de données de code, de ne pas le vivre, rendu <INPUT> balises. (Cependant, je dois avouer qu'il n'est jamais venu à moi; dans mon getDisabledState fonction de (), j'ai toujours été de retour, soit "désactivé" ou la chaîne vide ("").
    • Si mon violon de travail avec votre navigateur, puis il travaille. Je n'ai pas utiliser Firebug. Dans le Chrome dev tools, il est clair qu'il ajoute et supprime l'attribut si vous revenez "disabled" et undefined.
    • OK. J'ai vérifié cela à l'aide de Chrome. Merci pour la réponse rapide et la démo de Violon. C'est une solution simple et élégante qui n'est jamais venu à moi. En général, je initialiser mon retour des valeurs attendues au type de données (qui pour 'disabled' ou 'readonly' est une chaîne de caractères). Je vais juste initialiser à 'undefined' et je devrais être bon pour aller. Merci!
    • Si vous getDisabledState() la fonction retourne true/false, vous pouvez utiliser l'opérateur ternaire à la volée, sans avoir à modifier votre fonction: <input type="text" data-bind="attr: {"désactivé": getDisabledState() ? 'disabled' : null }" /> je vais avoir le même effet que le retour de chaîne ou une valeur null.
    InformationsquelleAutor nemesv
  2. 9

    Vous pouvez également créer une liaison pour readonly 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;
}
};

    Source: https://github.com/knockout/knockout/issues/1100

    • Merci pour le partage de la source, et dont le code en ligne.
    • Après la grande! Pourriez-vous également inclure une démonstration de la façon de l'utiliser? Je suis sûr que je pourrais le comprendre, mais je n'ai jamais fait une liaison personnalisée avant, et il pourrait être utile à d'autres.
    • Désolé, je n'ai pas utilisé KO dans plusieurs années. Ces jours-ci, j'utilise de l'Aurelia cadre.
    InformationsquelleAutor Greg Gum
  3. 7

    Knock-out a un activer liaison, ainsi que d'un désactiver de liaison.

    Je ne suis pas sûr s'ils étaient disponibles lorsque la question a été posée, mais tout le monde se référant à cette question devrait être au courant.

    • Assurez-vous de choisir le bon. !observableProperty ne fonctionne pas. Le PAS ! n'est pas retenue par l'évaluateur.
    • !observableProperty() fonctionne bien 🙂 beaucoup plus rapide et souvent plus propre que d'une liaison personnalisée
    • C'est une commune de knock-out débutant erreur. Lorsque vous ajoutez un opérateur comme ! en face d'un observableProperty, vous avez besoin d'appeler explicitement par l'ajout de () à la fin de la propertyName. Cela dit knock-out pour soulever l'ensemble de l'expression d'une synthèse calculée. Si vous utilisez google Chrome Débogueur et le type dans un bidon observableProperty qui n'existe pas, il va générer une erreur avec un VM:SomeLineNumber dans la Console. Cliquez sur la machine virtuelle:SomeLineNumber et vous verrez ce knock-out généré.
    InformationsquelleAutor Frank Hiller