プロジェクトでKnockoutMVCを使用しています(ASP.NET MVC3、Razor)。10進数形式を変更する方法が見つかりません。小数点記号としてカンマを使用したい。ノックアウト以外のRazorヘルパーを使用してデータをバインドすると、データは正しく(コンマを使用して)レンダリングされますが、ノックアウトバインドを使用してバインドすると、ドットをコンマ区切りとして使用して数値がレンダリングされます。
カンマを使用する10進形式を変更するにはどうすればよいですか?
プロジェクトでKnockoutMVCを使用しています(ASP.NET MVC3、Razor)。10進数形式を変更する方法が見つかりません。小数点記号としてカンマを使用したい。ノックアウト以外のRazorヘルパーを使用してデータをバインドすると、データは正しく(コンマを使用して)レンダリングされますが、ノックアウトバインドを使用してバインドすると、ドットをコンマ区切りとして使用して数値がレンダリングされます。
カンマを使用する10進形式を変更するにはどうすればよいですか?
サーバーとクライアントのロケールの違いを見ています。
.NET コードはサーバー ロケールに関して数値をフォーマットしますが、JS コードはブラウザー ロケールに関して数値をフォーマットします。
ブラウザ内でロケール/地域を変更してみてください。
編集:
(それがあなたを助けなかったとしても、それが他の誰かを助ける場合に備えて、私は上記を残しています)
問題は、サーバー側とクライアント側の違いを理解していることです。
Razor コードはサーバー上で実行され、HTML に「変換」されます。
一方、サーバーは Javascript をテキストとして扱い、送信する HTML ドキュメントの一部にすぎません。
Javascriptはクライアント マシン (ブラウザ) で実行されます。
Razor Helper が数値をフォーマットする方法は、サーバーに設定されているロケールに基づいています。一方、javascript は、ブラウザーで設定されたロケールに基づいて数値をフォーマットします。
Knockout/Javascript で、ロケールに関係なく (クライアント側で) 希望どおりに数値をフォーマットするように強制するには、コアで次のメソッドを使用してカスタム バインディングを記述できます。
function formatWithComma(x, precision, seperator) {
var options = {
precision: precision || 2,
seperator: seperator || ','
}
var formatted = x.toFixed( options.precision );
var regex = new RegExp('^(\\d+)[^\\d](\\d{' + options.precision + '})$');
formatted = formatted.replace(regex, '$1' + options.seperator + '$2');
return formatted;
}
したがって、バインディングは次のようになります。
ko.bindingHandlers.commaDecimalFormatter = {
init: function(element, valueAccessor) {
var observable = valueAccessor();
var interceptor = ko.computed(function() {
return formatWithComma( observable() );
}
ko.applyBindingsToNode( element , { value: interceptor } );
}
}
次に、Razor ビューで次のようにします。
@ko.Bind.Custom("commaDecimalFormatter ", m => m.MyCustom)
(注意してください、私は KnockoutMVC を使用したことがないため、この最後の行はバインディング名が変更されたドキュメントから直接引用したものであり、テストされていません。
また、私は and を使用したko.computed
ので、このバインディングは読み取り専用<input>
です。要素で使用しても意味がありません。で使用することをお勧めし<span>
ます。これを逆に実装する双方向バインディングにすることができます。
ko.computed( {
read: function() {
/* method as above */
},
write: function(newValue) {
/* implement reverse */
observable( newValue );
}
}
編集2
このフィドルがより明確になることを願っています