Come modificare il testo per i campi selezionati in maiuscolo usando KnockoutJS?

Question

I proprietari delle mie applicazioni desiderano che i campi di testo selezionati siano maiuscoli come se il blocco maiuscole fosse attivo. Sto usando un viewmodel KnockoutJS con osservabili per questi campi. C'è un modo in cui posso effettivamente convertire qualsiasi testo inserito dall'utente in maiuscolo?

ho messo un evento input sui controlli che volevo cambiare, ma ha scoperto che anche se funziona, le osservabili non vengono aggiornati.

<input type="text" maxlength="80" data-bind="value: colorName, disable: $parent.isReadOnly, event: { 'input': toUpper }" /> 

toUpper: function (d, e) { 
    if (e.target) { 
     if (e.target.value) { 
      e.target.value = e.target.value.toUpperCase(); 
     } 
    } 
} 

Ho anche pensato di mettere una classe CSS ucase sui controlli Voglio essere maiuscole e poi o sul client o server, risparmiando quei campi in maiuscolo.

.ucase { 
    text-transform: uppercase; 
} 

Answer 1

Si potrebbe estendere le caratteristiche osservabili -

<input data-bind="value: colorName, valueUpdate:'afterkeydown'" /> 

ko.extenders.uppercase = function(target, option) { 
    target.subscribe(function(newValue) { 
     target(newValue.toUpperCase()); 
    }); 
    return target; 
}; 

var colorName = ko.observable().extend({ uppercase: true }); 

violino esempio - http://jsfiddle.net/kbFwK/

In pratica ogni volta che il valore cambia convertirà il valore del osservabile in maiuscolo.

Lo svantaggio è che in realtà cambia il valore e sarebbe memorizzare in questo modo pure. Si può sempre virare su una proprietà calcolata sull'osservabile solo per scopi di visualizzazione. Puoi farlo utilizzando un ko.computed, un gestore di binding personalizzato (poiché è solo per la presentazione) o qualcosa di simile. Se questo è più di ciò che stai cercando fammelo sapere con un commento.

Modifica

Aggiornato con afterkeydown - http://jsfiddle.net/kbFwK/2/