【问题标题】:knockout js and globalization淘汰js和全球化
【发布时间】:2011-09-14 22:41:41
【问题描述】:

我不知道如何使用淘汰赛 js 和非美国语言环境处理计算。我的逗号是 , 并且使用 jquery.globalization 插件正确验证,但淘汰赛计算给了我一个 NaN。淘汰赛 js 是否以任何方式支持这一点,或者是否存在任何解决方法?

示例:

使淘汰赛 js 网站上的 cartEditor 示例工作允许数量字段中的十进制值并允许全球化输入(作为逗号符号)和输出格式

http://knockoutjs.com/examples/cartEditor.html

我需要这个在 asp.net mvc 3 站点上工作,因为我正在使用 nb-NO 文化运行该站点,并且模型绑定器期望作为逗号符号

【问题讨论】:

  • 你有样品吗?如有必要,我们可以编写一个快速的自定义绑定来使用 jquery.globalization API 调用。
  • @RP Niemeyer 非常棒的帮助!我现在可能会开始使用它,知道你在附近:)

标签: asp.net-mvc-3 globalization knockout.js


【解决方案1】:

我通过编写一个自定义绑定来包装 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 广泛的格式化选项,看看你可以用这些设置做什么。

【讨论】:

    【解决方案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);
    

    【讨论】:

    • 你们拯救了我的一天。不要忘记在更新处理程序中检查 NaN。尤其是因为“(newValue != elementValue);”如果 newValueelementValue 都是 NaN,则将始终返回 true。这种致命的更新循环可能会发生,例如如果您使用 ko.mapping 接收具有空数组作为值的模型数据。看到这个小提琴jsfiddle.net/jham/sd95e
    猜你喜欢
    • 1970-01-01
    • 2011-11-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-11-01
    • 2013-07-30
    • 2018-08-13
    • 2013-08-14
    相关资源
    最近更新 更多