基因敲除掩蔽

Question

我正在使用Knockout.js，并且我正在尝试对用户输入使用掩码。当用户输入数字时，我想使用掩码，并用逗号显示它。所以1000等于1000

为此，我有这个函数

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

我将创建一个计算的可观察对象并将其绑定到该对象

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'"/>

上的整个示例