Aggiungi un attributo elemento in knockout.js

Question

La libreria di knockout.js ha uno "attr" data binding che consente di modificare dinamicamente il valore di un attributo di elemento HTML (ad esempio il "titolo"). Tuttavia, in alcuni casi, l'attributo può o non può essere necessario a seconda del corrispondente osservabile sull'oggetto associato. Ad esempio, se il mio modello ha un osservatore "titolo", potrei voler impostare l'attributo "titolo" se è presente (non nullo) o saltare l'attributo interamente se non è presente (null).

Il knockout fornisce un modo per impostare in modo condizionale un attributo? (Idealmente senza condizionale rendere l'intero elemento tag di apertura ...)

[Nota] Questa domanda nome simile è stato effettivamente risolto la gestione speciale di eliminazione diretta di classi CSS e non si riferisce a questa domanda (o il proprio titolo) : How to conditionally render an css class with knockoutjs

Answer 1

Avevo bisogno di questo quando si seleziona un (che stavo generando manualmente invece di knockout incorporato).

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

che indica di aggiornare sempre l'attributo di 'testo' e di aggiungere l'attributo 'valore', ma solo aggiungere 'selezionato' se i dati ha già un valore di 'selezionato' definito.

Answer 2

È possibile creare un binding personalizzato attrIf che verificherà il valore di uno specifico booleano osservabile prima di aggiungere o meno gli attributi. Vedi questo esempio:

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

Vorrei poter avere appena risposto a @ gbs, ma non posso. La mia soluzione sarebbe stata quella di avere due dello stesso elemento HTML, uno con l'attributo, uno senza, e una condizione a eliminazione diretta per aggiungerne uno in base all'elemento. So anche su questo custom biding, ma quale soluzione è più efficiente?

Answer 4

L'associazione di dati "attr" di Knockout supporta questo scenario solo restituendo null o non definito dalla funzione getDisabledState(), quindi non emetterà l'attributo.

La risposta è stata recuperata dalla Knockout attr binding with attributes like 'readonly' and 'disabled'