Conditionnellement ajouter un attribut d'élément dans knockout.js

L'knockout.js la bibliothèque dispose d'un "attr" liaison de données qui permet de modifier dynamiquement la valeur d'un attribut d'élément HTML (par exemple, le "titre"). Toutefois, dans certains cas, l'attribut peut ou peut ne pas être nécessaire en fonction des observables sur l'objet lié. Par exemple, si mon modèle est un "titre" observables je souhaiterez peut-être définir l'attribut "title" si elle est présente (non-nulle) ou de l'ignorer l'attribut entièrement si elle n'est pas présente (null).

Knock-out ne fournit aucun moyen pour conditionnellement définir un attribut? (Idéalement sans conditionnellement à rendu l'ensemble de l'élément balise d'ouverture...)

[Remarque] Cette même nom que la question a été effectivement résolu par knock-out du traitement spécial des classes CSS et ne se rapportent pas à cette question (ou de son propre titre): Comment conditionnellement rendre une classe css avec knockoutjs

  • Je pense que c'est le comportement par défaut si observables retourne null mais j'ai peut-être tort. Puis-je vous demander pourquoi vous devez explicitement de ne pas définir l'attribut au lieu d'title="" dans le cas d'une valeur vide ?
InformationsquelleAutor maerics | 2012-10-18
  1. 82

    J'avais besoin de ce moment de la sélection (que j'étais générer manuellement au lieu de construit dans knock-out). 

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

    Ce dit de toujours mettre à jour le "texte" de l'attribut et pour ajouter de la "valeur" de l'attribut, mais seulement d'ajouter "selected" si les données a déjà une valeur de 'selected' défini.

    • donc, fondamentalement, mettre la valeur 'null' comme valeur de l'attribut et il ne rendra pas d'attribut, nice!
    • Cela devrait être validés réponse. Il répond à la question de la façon la plus simple.
    • Je suis d'accord que cela devrait être la accepté de répondre. Lors de la création d'une liaison personnalisée sera absolument travailler, c'est plus simple, et répond à la question posée plus directement.
    • Très propre solution si votre logique est simple. Jusqu'-vote.
    InformationsquelleAutor JJ Rohrer
  2. 29

    Vous pouvez créer une liaison personnalisée attrIf qui va vérifier la valeur du observables boolean avant de les ajouter ou non les attributs. Voir cet exemple: 

    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>
    • Génial, mais un grave problème - si j'ai un attribut autre que "titre" et je ne veux pas _if à s'appliquer à elle... La _if encore. Encore, le code-l'idée est bonne.
    • vous pouvez toujours ajouter un autre attribut à l'aide de l'ko standard 'attr' obligatoires (ce qui n'est pas affecté par la _if drapeau). exemple: data-bind="attrIf: {title: le titre, _if: drapeau}, attr: {otherAttr: val}"
    • je recommande d'avoir quelques plus de la logique que la suppression sur le fond... cette réponse ne fonctionne pas si vous voulez conditionnellement remplacer un attribut qui existe déjà sur l'élément. image à la suivante <input type="number" step=".01" data-bind="_if: le drapeau, l'étape:1" />
    InformationsquelleAutor gbs
  3. 8

    Knock-out du "attr" liaison de données prend en charge ce scénario, il suffit de retourner la valeur null ou undefined à partir de votre getDisabledState() la fonction ne sera pas émettre de l'attribut.

    Cette réponse a été récupéré à partir de Knock-out attr liaison avec des attributs comme "lecture seule" et "personnes handicapées"

    InformationsquelleAutor zshift
  4. 2

    Je souhaite que je pourrais avoir juste répondu à @abg, mais je ne peux pas. Ma solution aurait été d'avoir deux fois le même élément HTML, l'un avec l'attribut, l'autre sans, et un knock-out condition pour ajouter une fonction de l'élément. Je connais aussi cette coutume biding, mais dont la solution est plus efficace?

    • Et que faites-vous si vous avez 5 attributs différents pour le même élément? Beaucoup de plaisir en perspective...
    InformationsquelleAutor Lavinia Andreea Cojocaru