如何使用 Knockout.js 自定义绑定处理文本字段的内容？

debugcn 发表于 Dev

泰西格

我有一个初始值为 0.00 的简单文本字段。但是，当我删除文本字段的内容并且焦点转到另一个元素时，返回了以前的格式 0.00。删除其内容后，我希望有空字段。代码如下所示：

1) 模板：

<div class="group">
    <p class="ds-field-name top width-auto">To</p>
    <input class="ds-input width-fixed-quarter" type="text" data-bind="moneyInfinity: fields.amountTo, moneyMultiplier: 100, moneyABS: true"/>
</div>

2）自定义绑定：

ko.bindingHandlers.moneyInfinity = {
    format(data) {
        if (typeof data === 'undefined' || data === null) return '';
        const num = parseFloat(data) || 0;
        return num.toFixed(2);
    },
    init(element, valueAccessor, allBindingsAccessor) {
        const value = valueAccessor();
        const bindings = allBindingsAccessor();
        const multiplier = (bindings.moneyMultiplier !== '' && undefined !== bindings.moneyMultiplier)
            ? bindings.moneyMultiplier : 1.00;

        const abs = bindings.moneyABS || false;

        const format = ko.bindingHandlers.money.format;

        $(element).change(function () {
            const $this = $(this);

            if ($this.val() === '') {
                $this.val(null);
                value(null);

                return;
            }

            const normalized = ($this.val() || '0').replace(',', '.');
            const newData = format(abs ? Math.abs(normalized) : normalized);

            $this.val(multiplier);
            value(newData * multiplier);
        });
    },
    update(element, valueAccessor, allBindingsAccessor) {
        const main = ko.unwrap(valueAccessor());
        const value = valueAccessor();
        const bindings = allBindingsAccessor();
        const multiplier = bindings.moneyMultiplier || 1.00;
        const abs = bindings.moneyABS || false;

        const format = ko.bindingHandlers.money.format;

        if (value() === '') {
            return;
        }

        $(element).val(format(abs ? Math.abs(value() / multiplier) : value() / multiplier));
    }
};

杰森说话

我认为它一直回到“0.00”的主要原因是 UI 正在更新模型，然后导致模型再次更新 UI。在您的绑定中，当模型更新时，它总是将输出格式化为 UI，因此它将该部分视为空白并将“0.00”发送回 UI。

我必须进行一些其他更改才能使其正常工作，但这里有一个更新的绑定：

function format(data) {
        if (typeof data === 'undefined' || data === null) return '';
        const num = parseFloat(data) || 0;
        return num.toFixed(2);
    }
    
ko.bindingHandlers.moneyInfinity = {
    init(element, valueAccessor, allBindingsAccessor) {
        const value = valueAccessor();
        const bindings = allBindingsAccessor();
        const multiplier = (bindings.moneyMultiplier !== '' && undefined !== bindings.moneyMultiplier)
            ? bindings.moneyMultiplier : 1.00;

        const abs = bindings.moneyABS || false;

        //const format = ko.bindingHandlers.money.format;

        $(element).change(function () {
            const $this = $(this);
	
            if ($this.val() === '') {
                //$this.val(null); //Not sure what this was supposed to do
                value(null);

                return;
            }

            const normalized = ($this.val() || '0').replace(',', '.');
            const newData = format(abs ? Math.abs(normalized) : normalized);

            //$this.val(multiplier); //Not sure what this was supposed to do
            value(newData * multiplier);
            value.notifySubscribers(); //force an update even if value  evaluates the same. "0" == "0.00"
        });
    },
    update(element, valueAccessor, allBindingsAccessor) {
        const main = ko.unwrap(valueAccessor());
        const value = valueAccessor();
        const bindings = allBindingsAccessor();
        const multiplier = bindings.moneyMultiplier || 1.00;
        const abs = bindings.moneyABS || false;

        //const format = ko.bindingHandlers.money.format;

        if (!value() && typeof(value()) != "number") { //ignore null, undefined, and blank
            return;
        }

        $(element).val(format(abs ? Math.abs(value() / multiplier) : value() / multiplier));
    }
};

function viewModel(){
  this.fields = {
    amountTo: ko.observable('')
  };
}

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div class="group">
    <p class="ds-field-name top width-auto">To</p>
    <input class="ds-input width-fixed-quarter" type="text" data-bind="moneyInfinity: fields.amountTo, moneyMultiplier: 100, moneyABS: true"/>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。