Il y a plusieurs façons de gérer une situation comme celle-ci. Vous pouvez choisir de l'aborder par le biais des liaisons ou de la pousser dans votre modèle de vue.
Si votre modèle de vue est créé par le plugin de mappage et que vous ne souhaitez pas personnaliser la façon dont il est créé, vous pouvez envisager d'utiliser une liaison personnalisée qui est une enveloppe de la liaison de texte pour gérer le formatage.
Quelque chose comme ( http://jsfiddle.net/rniemeyer/RVL6q/ ):
ko.bindingHandlers.numericText = {
update: function(element, valueAccessor, allBindingsAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor()),
precision = ko.utils.unwrapObservable(allBindingsAccessor().precision) || ko.bindingHandlers.numericText.defaultPrecision,
formattedValue = value.toFixed(precision);
ko.bindingHandlers.text.update(element, function() { return formattedValue; });
},
defaultPrecision: 1
};
Il serait certainement possible de créer une liaison encore plus générique (formattedText) qui inspecterait la valeur et la mettrait en forme en utilisant des valeurs par défaut modifiables ou qui vous permettrait de passer des options de mise en forme ( { type: "numeric", precision: 2 } ).
Pour votre scénario, il semble que la première option soit un bon choix. Cependant, si vous voulez le pousser dans votre modèle de vue, vous pouvez créer une observable spéciale qui peut renvoyer à la fois une version formatée et une version brute de la valeur.
Cela pourrait être quelque chose comme ( http://jsfiddle.net/rniemeyer/fetBG/ ):
function formattedNumericObservable(initialValue, precision) {
var _raw = ko.observable(initialValue),
precision = precision || formattedNumericObservable.defaultPrecision,
//the dependentObservable that we will return
result = ko.dependentObservable({
read: function() {
return _raw().toFixed(precision);
},
write: _raw
});
//expose raw value for binding
result.raw = _raw;
return result;
}
Maintenant, vous pouvez potentiellement vous lier à myValue y myValue.raw en fonction de vos besoins. Sinon, vous pourriez retourner la valeur brute par défaut et exposer une fonction formatted dependentObservable. Lorsqu'un objet de ce type est converti en JSON, il perd toutes les "sub-observables". Si vous renvoyez ces données à un serveur, cela peut être un élément à prendre en compte.
Vous pourriez à nouveau le rendre plus générique et créer une formattedObservable qui prend en compte certaines informations sur la façon de formater l'objet.
Enfin, la version 1.3 beta offre une extenders API. Vous pourriez faire quelque chose de similaire à ce qui précède comme : ( http://jsfiddle.net/rniemeyer/AsdES/ )
ko.extenders.numeric = function(target, precision) {
var result = ko.dependentObservable({
read: function() {
return target().toFixed(precision);
},
write: target
});
result.raw = target;
return result;
};
Ensuite, appliquez-le à un observable comme : var myValue = ko.observable(1.223123).extend({numeric: 1});
Vous pourriez faire en sorte que l'extension ajoute également un formatted dependentObservable à target au lieu de renvoyer le dependentObservable lui-même.
