gpt4 book ai didi

javascript - Knockout.js 使用拦截器扩展值绑定(bind)

转载 作者:数据小太阳 更新时间:2023-10-29 04:07:22 25 4
gpt4 key购买 nike

这似乎是一种在绑定(bind)到输入字段时使用 knockout 来清理/验证/格式化数据的常用方法,它创建了一个使用计算可观察值的可重用自定义绑定(bind)。它基本上扩展了默认值绑定(bind)以包含一个拦截器,该拦截器将在写入/读取之前格式化/清理/验证输入。

ko.bindingHandlers.amountValue = {
init: function (element, valueAccessor, allBindingsAccessor) {
var underlyingObservable = valueAccessor();

var interceptor = ko.computed({
read: function () {
// this function does get called, but it's return value is not used as the value of the textbox.
// the raw value from the underlyingObservable is still used, no dollar sign added. It seems like
// this read function is completely useless, and isn't used at all
return "$" + underlyingObservable();
},

write: function (newValue) {
var current = underlyingObservable(),
valueToWrite = Math.round(parseFloat(newValue.replace("$", "")) * 100) / 100;

if (valueToWrite !== current) {
// for some reason, if a user enters 20.00000 for example, the value written to the observable
// is 20, but the original value they entered (20.00000) is still shown in the text box.
underlyingObservable(valueToWrite);
} else {
if (newValue !== current.toString())
underlyingObservable.valueHasMutated();
}
}
});

ko.bindingHandlers.value.init(element, function () { return interceptor }, allBindingsAccessor);
},

update: ko.bindingHandlers.value.update
};

jsFiddle 示例:http://jsfiddle.net/6wxb5/1/

我错过了什么吗?我看到到处都在使用这种方法,但它似乎并不完全有效。读取函数似乎完全没用,因为它根本没有被使用过。在写入函数中,输入“23.0000”会将写入值更改为 23,但文本框值不会更新。

最佳答案

问题来自自定义绑定(bind)的 update 部分。这部分将根据原始模型值更新字段。因此,附加在 init 中的事件处理程序将通过您的可写计算发送新值,但字段的更新实际上发生在 update 中。

一种选择是从您的 init 函数应用值绑定(bind)并跳过 update 函数,例如:

ko.bindingHandlers.amountValue = {
init: function (element, valueAccessor, allBindingsAccessor) {
var underlyingObservable = valueAccessor();

var interceptor = ko.computed({
read: function () {
// this function does get called, but it's return value is not used as the value of the textbox.
// the raw value from the underlyingObservable, or the actual value the user entered is used instead, no
// dollar sign added. It seems like this read function is completely useless, and isn't used at all
return "$" + underlyingObservable();
},

write: function (newValue) {
var current = underlyingObservable(),
valueToWrite = Math.round(parseFloat(newValue.replace("$", "")) * 100) / 100;

if (valueToWrite !== current) {
// for some reason, if a user enters 20.00000 for example, the value written to the observable
// is 20, but the original value they entered (20.00000) is still shown in the text box.
underlyingObservable(valueToWrite);
} else {
if (newValue !== current.toString())
underlyingObservable.valueHasMutated();
}
}
});

ko.applyBindingsToNode(element, { value: interceptor });
}
};

更新 fiddle :http://jsfiddle.net/rniemeyer/Sr8Ev/

关于javascript - Knockout.js 使用拦截器扩展值绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12643455/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com