span multiple knockout data html data-binding knockout.js readonly disabled-input

html - multiple - Knockout attr vinculante con atributos como ''readonly'' y ''disabled''



knockout js data bind multiple attributes (3)

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

Demo Fiddle .

¿Cuál es la forma sugerida de "mejores prácticas" para utilizar el enlace de datos "attr" de Knockout con atributos independientes como "solo lectura" y "desactivado" ?

Estos atributos son especiales ya que generalmente se habilitan estableciendo el valor del atributo en el nombre del atributo (aunque muchos navegadores funcionan bien si simplemente se incluyen los nombres de los atributos sin ningún valor en el HTML):

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

Sin embargo, si no desea aplicar estos atributos, la práctica general es simplemente omitirlos por completo del HTML (en lugar de hacer algo como readonly = "false"):

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

El enlace de datos "attr" de Knockout no es compatible con este escenario. Tan pronto como proporcione un nombre de atributo, también debo proporcionar un valor:

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

¿Hay una forma de navegador cruzado que desactive ''disabled'' o ''readonly''? ¿O hay un truco con un enlace personalizado que puedo usar para no renderizar nada si no quiero que el elemento se deshabilite o se convierta en de solo lectura?


Knockout tiene un enlace de enable así como un enlace de disable .

No estoy seguro de si estaban disponibles cuando se formuló la pregunta, pero cualquier persona que se refiera a este tema debe tener en cuenta.


También puede crear un enlace de solo lectura como este:

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; } };

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