Jak zmienić tekst w wybranych polach na wielkie litery za pomocą KnockoutJS?

Question

Właściciele moich aplikacji chcą, aby wybrane pola tekstowe były pisane wielkimi literami, tak jakby blokada caps była włączona. Używam viewmodel KnockoutJS z obserwowalne dla tych pól. Czy istnieje sposób, w jaki mogę przekonwertować dowolny wprowadzony przez użytkownika tekst na wielkie litery?

Umieściłem zdarzenie input na kontrolkach, które chciałem zmienić, ale okazało się, że chociaż działa, obserwowalne nie są aktualizowane.

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

Mam również na myśli oddanie klasę ucase CSS na kontroli Chcę być wielkimi literami, a następnie albo na kliencie lub serwerze, oszczędzając te pola w górnej części obudowy.

.ucase { 
    text-transform: uppercase; 
} 

Answer 1

Można rozszerzyć obserwable -

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

skrzypce przykład - http://jsfiddle.net/kbFwK/

Zasadniczo ilekroć wartość zmienia to przekonwertować wartość obserwowalny na wielkie litery.

Wadą jest to, że faktycznie zmienia wartość i przechowuje ją również w ten sposób. Zawsze można użyć właściwości obliczeniowej na obserwowalnym, tylko w celach wyświetlania. Możesz to zrobić za pomocą ko.computed, niestandardowego programu obsługi powiązań (ponieważ jest to tylko prezentacja) lub czegoś podobnego. Jeśli to jest więcej tego, czego szukasz, daj mi znać z komentarzem.

Edit

Zaktualizowano afterkeydown - http://jsfiddle.net/kbFwK/2/