javascript - Agregar condicionalmente un atributo de elemento en knockout.js

Question

La biblioteca knockout.js tiene un enlace de datos "attr" que le permite cambiar dinámicamente el valor de un atributo de elemento HTML (por ejemplo, el "título"). Sin embargo, en algunos casos, el atributo puede o no ser necesario dependiendo de la observación correspondiente en el objeto vinculado. Por ejemplo, si mi modelo tiene un "título" observable, me gustaría establecer el atributo "título" si está presente (no nulo) u omitir el atributo por completo si no está presente (nulo).

¿Proporciona el knockout alguna forma de configurar condicionalmente un atributo? (Idealmente, sin representar de forma condicional la etiqueta de apertura del elemento completo ...)

[Nota] Esta pregunta con un nombre similar se resolvió en realidad mediante el manejo especial de las clases de CSS y no se relaciona con esta pregunta (o su propio título): Cómo renderizar condicionalmente una clase css con knockoutjs

Answer 1

El enlace de datos "attr" de Knockout admite que este escenario simplemente devuelva nulo o indefinido desde su función getDisabledState () y luego no emitirá el atributo.

Esta respuesta se obtuvo de la vinculación Knockout attr con atributos como ''readonly'' y ''disabled''

Answer 2

Necesitaba esto al seleccionar un (que estaba generando manualmente en lugar de un knockout incorporado).

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

Esto dice que siempre actualice el atributo ''texto'' y que agregue el atributo ''valor'', pero solo agregue ''seleccionado'' si los datos ya tienen un valor ''definido''.

Answer 3

Ojalá pudiera haber respondido a @gbs, pero no puedo. Mi solución habría sido tener dos del mismo elemento HTML, uno con el atributo, uno sin, y una condición de nocaut para agregar uno de acuerdo con el elemento. También sé acerca de esta licitación personalizada, pero ¿cuál de las soluciones es más eficiente?

Answer 4

Puede crear un enlace personalizado attrIf que verificará el valor de un booleano observable específico antes de agregar o no los atributos. Mira este ejemplo:

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>