Question

我正在使用Knockout.js，我试图在用户输入上使用掩码。当用户输入数字时，我想使用掩码，并用逗号显示。所以1000将是1,000

为此我有这个功能

function numberWithCommas(n) {
    var parts=n.toString().split(".");
    return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : "");
}

我不知道如何使用它以正确的方式显示它。

HTML（部分内容）

<div class="col-sm-2">
    <input type="text" id="myAmountInput" class="form-control" data-bind="value: myAmount">
</div>

JS（部分内容）

define(['knockout', 'knockout-validation', 'services/changeup', 'moment', 'lodash', 'plugins/router'], function (ko, validation, changeup, moment, _, router) {
    function numberWithCommas(n) {
        var parts = n.toString().split(".");
        return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : "");
    }

    var timerId = setInterval(tick, 1000 * 10);

    var exports = {
        isRequestor: undefined,
        myAmount: ko.observable().extend({ required: true, number: true }),
        errors: ko.validation.group(this),
        activate: function (activationData) {
            var requestId = activationData;
            return changeup.getUserInfo().then(function (userInfo) {
                exports.userInfo = userInfo;
                return changeup.getRequest(requestId).then(function (request) {
                    exports.request = wrapRequest(request);
                    exports.isRequestor = request.username === userInfo.username;

                    if (exports.isRequestor) {
                        exports.myAmount(null);
                        exports.isResponder(true);
                    }
                    else {
                        var currentResponse = _.find(exports.request.responses(), function (r) { return r.username === userInfo.username; });
                        exports.isResponder(!!currentResponse);
                        exports.myAmount(currentResponse ? currentResponse.amount : null);
                    }
                    tick();
                });
            });
        }
    };
    return exports;
});

Answer 1

我会创建一个Computed Observable并将其绑定到

this.myAmountWithCommas = ko.computed(function() {
        return numberWithCommas(this.myAmount());
    }, this);

Computed Observable

示例 jsFiddle

更新如果您更喜欢使用jsFiddle

，则使用绑定处理程序添加简单示例

Answer 2

我只是answered a question关于使用jQuery插件进行屏蔽。答案涉及如何使用自定义绑定处理程序使与knockout的集成更容易。可能需要考虑。

Answer 3

出于同样的目的，我正在使用jquery.maskedinput插件。它允许用户更容易地输入固定宽度输入，您希望他们以特定格式（日期，电话号码等）输入数据。

自定义绑定处理程序

ko.bindingHandlers.mask = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var options = ko.utils.unwrapObservable(valueAccessor()) || "";
        $(element).mask(options);
    }
};

然后你可以在任何DOM元素上使用它

<input data-bind="value: Number, mask: '9,9999'"/>

JSFIDDLE

上的整个示例

淘汰掩蔽

3 个答案: