Règles de mise en forme pour les numéros KnockoutJS

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/):

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 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/):

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 pourriez potentiellement se lier contre myValue et myValue.raw en fonction de vos besoins. Sinon, vous pouvez le retourner et retourne la valeur brute par défaut et d'exposer un formatted 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/)

ko.extenders.numeric = function(target, precision) {
    var result = ko.dependentObservable({
        read: function() {
           return target().toFixed(precision); 
        },
        write: target 
    });

    result.raw = target;
    return result;
};

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.

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)

var formatNumber = function (element, valueAccessor, allBindingsAccessor, format) {
//Provide a custom text value
var value = valueAccessor(), allBindings = allBindingsAccessor();
var numeralFormat = allBindingsAccessor.numeralFormat || format;
var strNumber = ko.utils.unwrapObservable(value);
if (strNumber) {
return numeral(strNumber).format(numeralFormat);
}
return '';
};
ko.bindingHandlers.numeraltext = {
init: function (element, valueAccessor, allBindingsAccessor) {
$(element).text(formatNumber(element, valueAccessor, allBindingsAccessor, "(0,0.00)"));  
},
update: function (element, valueAccessor, allBindingsAccessor) {
$(element).text(formatNumber(element, valueAccessor, allBindingsAccessor, "(0,0.00)"));
}
};
ko.bindingHandlers.numeralvalue = {
init: function (element, valueAccessor, allBindingsAccessor) {
$(element).val(formatNumber(element, valueAccessor, allBindingsAccessor, "(0,0.00)"));
//handle the field changing
ko.utils.registerEventHandler(element, "change", function () {
var observable = valueAccessor();
observable($(element).val());
});        
},
update: function (element, valueAccessor, allBindingsAccessor) {
$(element).val(formatNumber(element, valueAccessor, allBindingsAccessor, "(0,0.00)"));
}
};
ko.bindingHandlers.percenttext = {
init: function (element, valueAccessor, allBindingsAccessor) {
$(element).text(formatNumber(element, valueAccessor, allBindingsAccessor, "(0.000 %)"));
},
update: function (element, valueAccessor, allBindingsAccessor) {
$(element).text(formatNumber(element, valueAccessor, allBindingsAccessor, "(0.000 %)"));
}
};
ko.bindingHandlers.percentvalue = {
init: function (element, valueAccessor, allBindingsAccessor) {
$(element).val(formatNumber(element, valueAccessor, allBindingsAccessor, "(0.000 %)"));
//handle the field changing
ko.utils.registerEventHandler(element, "change", function () {
var observable = valueAccessor();
observable($(element).val());
});
},
update: function (element, valueAccessor, allBindingsAccessor) {
$(element).val(formatNumber(element, valueAccessor, allBindingsAccessor, "(0.000 %)"));
}
};

Exemples de liaisons de Vue.

        <td><label>Available Commitment Balance:</label> </td>
<td>
<!-- ko with: SelectedLoan -->
<span data-bind="numeraltext: AvailableCommitmentAmount"></span>            
<!-- /ko -->
</td>
<td><label> % Interest Rate:</label></td>
<td>
<!-- ko with: SelectedLoan -->
<input  data-bind="percentvalue: InterestRatePercent" />
<!-- /ko -->
</td>
<td><label> $ Amount To Transfer:</label></td>
<td>
<!-- ko with: SelectedLoan -->
<input class="inputsmall" data-bind="numeralvalue: FundsHeldTotalAmount" />
<!-- /ko -->
</td>

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 et valueFormatted sont des wrappers pour le texte et la valeur liaisons respectivement.

Utilisation sera:

<span data-bind="textFormatted: Amount, pattern: 'n'" />

É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...

<input data-bind="valueFormatted: Amount, pattern: 'n', culture: 'et'" type="text" />

Valeurs pour pattern de propriété/de liaison doit être l'un des formats adaptés que
Globalize.format( value, format, [locale] ) de la fonction de format param attend.
En va de même pour culture de propriété/de liaison qui sera utilisé en option locale param.
Mondialiser de référence.

Liaison définitions:

(function() {
function getFormatedOrPlainResult(value, allBindingsAccessor) {
var pattern = allBindingsAccessor.get('pattern');
if (pattern == null || !/\S*/.test(pattern)) {
return value;
}
var valueToFormat = pattern === 'd' ? new Date(value) : value;
return Globalize.format(valueToFormat, pattern, allBindingsAccessor.get('culture'));
};
ko.bindingHandlers.textFormatted = {
init: ko.bindingHandlers.text.init,
update: function(element, valueAccessor, allBindingsAccessor) {
var result = getFormatedOrPlainResult(ko.unwrap(valueAccessor()), allBindingsAccessor);
ko.bindingHandlers.text.update(element, function() { return result; });
}
};
ko.bindingHandlers.valueFormatted = {
init: function(element, valueAccessor, allBindingsAccessor) {
var result = getFormatedOrPlainResult(ko.unwrap(valueAccessor()), allBindingsAccessor);
ko.bindingHandlers.value.init(element, function() { return result; }, allBindingsAccessor);
},
update: function(element, valueAccessor, allBindingsAccessor) {
var result = getFormatedOrPlainResult(ko.unwrap(valueAccessor()), allBindingsAccessor);
ko.bindingHandlers.value.update(element, function() { return result; }, allBindingsAccessor);
}
};
}());