Règles de mise en forme pour les numéros KnockoutJS
J'ai un viewModel avec un tas de chiffres avec beaucoup de décimales. Si mon liaisons ressembler à ceci:
<tr>
<td data-bind="text: Date"></td>
<td data-bind="text: ActualWeight"></td>
<td data-bind="text: TrendWeight"></td>
</tr>
Puis, bien sûr, la sortie a toutes les décimales et est très illisible. Changer les fixations pour ressembler à cela résout le problème, mais il est très détaillé et "bruyant":
<tr>
<td data-bind="text: Date"></td>
<td data-bind="text: ActualWeight().toFixed(1)"></td>
<td data-bind="text: TrendWeight().toFixed(1)"></td>
</tr>
Remarque, c'est un petit extrait de code et d'avoir à ajouter .toFixed(1) tous les endroits où je lier un certain nombre conduit à beaucoup plus confus balisage de ce qui est montré ici.
De tout, sauf des numéros, en remplaçant le toString a été un moyen efficace pour moi de contrôle à quoi ressemble la sortie. Toutes les suggestions sur un moyen de dire knock-out une fois, dans certains manière centrale pour ma page quelle est la fonction à utiliser pour convertir des nombres en chaînes de caractères avant qu'ils soient ajoutés à la sortie?
Pour cette question, ayant un objectif général de façon de dire knock-out comment mettre en forme tout type de valeur me semble qu'il serait utile. Primordial Date.le prototype.toString fonctionne, mais se sent un peu la main lourde car elle peut avoir un impact sur d'autres utilisations de .toString en plus il suffit de knock-out de l'.
Vous devez vous connecter pour publier un commentaire.
Il ya un couple de façons que vous pouvez gérer une situation comme celle-ci. Vous pouvez soit choisir de s'adresser à elle par le biais de liaisons ou de le pousser dans votre modèle de vue.
Si votre modèle de vue est créé par le plugin de cartographie et vous ne voulez pas entrer dans la personnalisation de la façon dont il est créé, alors vous pouvez envisager d'utiliser une liaison personnalisée qui est un wrapper pour le texte de liaison pour gérer la mise en forme.
Quelque chose comme (http://jsfiddle.net/rniemeyer/RVL6q/):
Il serait certainement possible de créer un encore plus générique de liaison (formattedText) que soit inspecté la valeur et formaté à l'aide de certaines substituables par défaut ou vous a permis de passer dans certaines options de mise en forme (
{ type: "numeric", precision: 2 }
).Pour votre scénario, il semble que la première option pourrait être un bon choix. Toutefois, si vous voulez pousser dans votre modèle d'affichage, vous pouvez créer un spécial observables qui peuvent retourner à la fois un formatage et une première version de la valeur.
Il pourrait être quelque chose comme (http://jsfiddle.net/rniemeyer/fetBG/):
Maintenant, vous pourriez potentiellement se lier contre
myValue
etmyValue.raw
en fonction de vos besoins. Sinon, vous pouvez le retourner et retourne la valeur brute par défaut et d'exposer unformatted
dependentObservable. Lorsqu'un objet comme celui-ci est converti en JSON, il va perdre de la "sous-observables", donc si vous êtes à l'envoi de ces données à un serveur qui pourrait être une considération.Vous pourrait de nouveau faire plus générique, et créer un
formattedObservable
qui prend quelques informations sur la façon de format de l'objet.Enfin, 1.3 beta offre une
extenders
API. Vous pourriez faire quelque chose de similaire comme: (http://jsfiddle.net/rniemeyer/AsdES/)Ensuite, de les appliquer à un fait observable comme:
var myValue = ko.observable(1.223123).extend({numeric: 1});
Vous pourriez avoir le répéteur aussi simplement ajouter un
formatted
dependentObservable àtarget
au lieu de retourner le dependentObservable lui-même.Depuis knock-out prend désormais en charge rallonges, je voudrais les utiliser à la place de liaisons personnalisées. La liaison ressemblerait à quelque chose comme ceci:
Vous devez écrire le
format
extender dans ce cas. Des exemples sont fournis dans le knock-out de la documentation.Pour le format de la devise et de pour cent, j'ai créé ma liaison personnalisée numeralformat.js pour être utilisé avec numeral.min.js trouvé à http://adamwdraper.github.com/Numeral-js/
numeralformat.js (Inspiré par dateformat.js et moment.min.js)
Exemples de liaisons de Vue.
À construire sur le acceptées réponse ci-dessus. Je bifurquais RP Niemeyers violon pour ajouter une virgule de mise en forme ainsi.
Donc, si vous avez 10001.232 ce sera comme format de 10 001.232. Très important si vous travaillez avec des prix. Encore une fois, c'est juste la construction de la réponse.
JSFiddle
Je me suis approché de mise en forme à l'aide de jQuery Mondialiser plug-in.
Voici ma version de la mise en forme des gestionnaires,
textFormatted
etvalueFormatted
sont des wrappers pour le texte et la valeur liaisons respectivement.Utilisation sera:
Éventuellement, la culture peut être spécifié en tant que bien. Mais je pense que ce type de contrôle ne doit pas appartenir au format HTML, mais il peut être utile lors de l'élaboration ou du temps de débogage...
Valeurs pour
pattern
de propriété/de liaison doit être l'un des formats adaptés que
de la fonction deGlobalize.format( value, format, [locale] )
format
param attend.En va de même pour
culture
de propriété/de liaison qui sera utilisé en optionlocale
param.Mondialiser de référence.
Liaison définitions:
Si c'est juste sur l'affichage d'une localisé numéro d'un texte contraignant, d'une manière très facile est d'utiliser
toLocaleString()
Pour plus d'informations, visitez page.