(这是 this question 的后续内容)
在 Knockout.js 中,textInput 绑定(bind)会在每次击键后更新模型,并允许我实现一个简单的输入掩码。它本身工作得很好,但是当输入字段位于模板内时,该字段在每次击键后都会失去焦点。
这个 fiddle 演示了这个问题。请注意,我需要一些 $parent 技巧来使输入字段在两个方向上工作(读取和写入)。如果我使用 $data,它会在外部更新时读取新值,但不会将其写入模型,也不应用输入掩码。
https://jsfiddle.net/h0qh3ecc/4/
简化代码如下:
HTML:
textInput (this one works):<br>
<input data-bind="textInput: formattedString" >
<div data-bind="text: formattedString"></div>
<hr>
template textInput ($parent loses focus / $data doesn't call write):<br>
<script type="text/html" id="input-standalone-template">
<input data-bind="textInput: $parent.formattedString"> <input data-bind="textInput: $data">
</script>
<div data-bind="template: { name: 'input-standalone-template', data: formattedString }"></div>
<hr>
JavaScript:
var model = (function () {
function format(str) {
var undone = str.replace(/-/g, '');
if (undone.length > 3) {
undone = undone.substr(0,3) + '-' + undone.substr(3);
}
return undone;
}
var displayString = ko.observable('');
var formattedString = ko.computed({
read: function () {
return displayString();
},
write: function (newValue) {
var f = format(newValue);
console.debug("Format", newValue, "=", f);
displayString(f);
}
});
return {
formattedString: formattedString
};
}());
ko.applyBindings(model)
这是一个错误吗?有解决办法吗?
最佳答案
我刚刚找到了一个解决方法:我必须将 $data
(或 $parent
,具体取决于页面结构)而不是直接将字段传递给模板 数据
参数。模板必须进行相应调整。
例如,而不是
<!-- define template -->
<script type="text/html" id="my-input-template">
<input data-bind="textInput: $data">
</script>
<!-- call template (passing field, causes focus issues) -->
<div data-bind="template: {
name: 'my-input-template',
data: formattedString
}">
</div>
我应该这样做
<!-- define template -->
<script type="text/html" id="my-input-template">
<input data-bind="textInput: formattedString">
</script>
<!-- call template (passing $data, works fine) -->
<div data-bind="template: {
name: 'my-input-template',
data: $data
}">
</div>
出于某种不明原因,此更改解决了问题。
关于javascript - 模板内的 knockout 文本输入失去焦点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30461349/