我无法弄清楚如何使用knockout js和非us locale来处理计算。我的逗号是,并且使用jquery.globalization插件正确验证,但是淘汰计算给了我一个NaN。 knockout js是否以任何方式支持这种情况,还是存在任何变通方法?
示例:
在淘汰赛js网站上的cartEditor示例允许数量字段中的十进制值并允许全球化输入(,作为逗号符号)和输出格式
http://knockoutjs.com/examples/cartEditor.html
我需要这个在asp.net mvc 3网站上工作,因为我使用nb-NO文化运行网站,并且模型绑定器期待,作为逗号标志
答案 0 :(得分:7)
我通过编写一个包含autoNumeric.js格式的自定义绑定来做类似的事情。 (gist)
ko.bindingHandlers.autoNumeric = function ($) {
function getElementValue(el) {
return parseFloat(el.autoNumericGet(), 10);
}
function getModelValue(accessor) {
return parseFloat(ko.utils.unwrapObservable(accessor()), 10);
}
return {
init: function (el, valueAccessor, bindingsAccessor, viewModel) {
var $el = $(el),
bindings = bindingsAccessor(),
settings = bindings.settings,
value = valueAccessor();
function updateModelValue() {
value(getElementValue($el));
};
$el.autoNumeric(settings);
$el.autoNumericSet(getModelValue(value), settings);
$el.change(updateModelValue);
},
update: function (el, valueAccessor, bindingsAccessor, viewModel) {
var $el = $(el),
newValue = getModelValue(valueAccessor()),
elementValue = getElementValue($el),
valueHasChanged = (newValue != elementValue);
if ((newValue === 0) && (elementValue !== 0) && (elementValue !== "0")) {
valueHasChanged = true;
}
if (valueHasChanged) {
$el.autoNumericSet(newValue);
setTimeout(function () { $el.change() }, 0);
}
}
};
}
使用此自定义autoNumeric绑定的数据绑定如下所示:
<input data-bind="autoNumeric:amount, settings:{aSign:'$'}" />
查看autoNumeric.js广泛的格式选项,了解您可以使用这些设置执行的操作。
答案 1 :(得分:2)
修改它以使其与最新的autoNumeric版本(1.9.x)兼容
(function($) {
function getElementValue(el) {
return parseFloat(el.autoNumeric('get'), 10);
}
function getModelValue(accessor) {
return parseFloat(ko.utils.unwrapObservable(accessor()), 10);
}
ko.bindingHandlers.autoNumeric = {
init: function (el, valueAccessor, bindingsAccessor, viewModel) {
var $el = $(el),
bindings = bindingsAccessor(),
settings = bindings.settings,
value = valueAccessor();
function updateModelValue() {
value(getElementValue($el));
};
if (settings.pSign === 's') {
settings.aSign = ' ' + settings.aSign;
} else {
settings.aSign = settings.aSign + ' ';
}
$el.autoNumeric(settings);
$el.autoNumeric('set', getModelValue(value));
$el.change(updateModelValue);
},
update: function (el, valueAccessor, bindingsAccessor, viewModel) {
var $el = $(el),
newValue = getModelValue(valueAccessor()),
elementValue = getElementValue($el),
valueHasChanged = (newValue != elementValue);
if ((newValue === 0) && (elementValue !== 0) && (elementValue !== "0")) {
valueHasChanged = true;
}
if (valueHasChanged) {
$el.autoNumeric('set', newValue);
setTimeout(function () { $el.change() }, 0);
}
}
};
})(jQuery);