La knockout.js la biblioteca tiene un «attr» enlace de datos que permite cambiar de forma dinámica el valor de un elemento HTML con el atributo (por ejemplo, el «título»). Sin embargo, en algunos casos, el atributo puede o puede no ser necesaria, dependiendo de la correspondiente observable en el objeto enlazado. Por ejemplo, si mi modelo tiene un «título» observables me podría establecer el atributo «title» si está presente (no nulo) o de omitir el atributo completamente si no está presente (null).

Hace knock-out proporciona ninguna manera de forma condicional establecer un atributo? (Idealmente sin condicionalmente representación de todo el elemento etiqueta de apertura…)

[Nota] Este nombre similar pregunta en realidad era resuelto por nocaut especial de manejo de clases CSS y no se refieren a esta pregunta (o su propio título): Cómo representar condicionalmente una clase css con knockoutjs

  • Creo que ese es el comportamiento por defecto si observable devuelve null, pero puedo estar equivocado. ¿Puedo preguntar por qué usted necesita explícitamente no se establece el atributo en lugar de title=»» en caso de un valor vacío ?
InformationsquelleAutor maerics | 2012-10-18

4 Comentarios

  1. 83

    Necesitaba esta hora de seleccionar una (que me estaba generando manualmente en lugar de en octavos de final).

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

    Esto dice actualizar siempre el atributo ‘text’ y añadir el ‘valor’ de atributo, pero sólo añadir ‘seleccionado’ si los datos que ya tiene un valor de ‘seleccionado’ definido.

    • así que, básicamente, poner ‘null’ como valor de atributo y no le hacen atributo, agradable!
    • Este debe ser validado respuesta. Es perfectamente responde a la pregunta de la manera mas sencilla.
    • Estoy de acuerdo en que esto debe ser aceptado respuesta. Mientras que la creación de un enlace personalizado absolutamente trabajo, esto es más simple, y se aborda la pregunta más directa.
    • Solución muy limpia si su lógica es simple. Hasta de votar.
  2. 29

    Puede crear un enlace personalizado attrIf en la que se comprobará el valor de un determinado observable booleano antes de agregar o no los atributos. Vea 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>
    • Genial, pero un problema grave – si tengo un atributo distinto de ‘título’, y yo no quiero _si para aplicar a ella… _si aún. Aún así, el código-la idea es buena.
    • usted puede agregar siempre el otro atributo mediante el ko estándar ‘attr’ de unión (que no es afectado por el _si de la bandera). ejemplo: data-bind=»attrIf: {title: título, _si: bandera}, attr: {otherAttr: val}»
    • yo recomendaría tener algo más de lógica en torno a que la eliminación en la parte inferior… esta respuesta no trabajar si usted desea condicionalmente reemplazar un atributo que ya existe en el elemento. imagen de la siguiente <input type=»number» step=».01″ data-bind=»_si: bandera, paso:1″ />
  3. 2

    Deseo que podría haber respondido a @egb, pero no puedo. Mi solución habría sido tener dos del mismo elemento HTML, uno con el atributo, una sin, y un golpe de gracia condición para agregar uno de acuerdo con el elemento. También sé acerca de esta costumbre esperando, pero que de la solución es más eficiente?

    • Y, ¿qué hacer si usted tiene 5 diferentes atributos para el mismo elemento? Montón de diversión en perspectiva…

Dejar respuesta

Please enter your comment!
Please enter your name here