更新绑定到表格的observableArray会导致焦点丢失
||
我将一个“ 0”绑定到一个模板，该模板为数组中的每个项目生成一个带有“ 1”的表。这样的想法是，当用户在最后一行输入文本时，页面会自动添加另一行；这是一个动态扩展的条目列表。
一切正常，但是发生这种情况时键盘焦点会丢失。我在这个小提琴中张贴了破碎的样本，其中包含以下内容：
function ingredientViewModel(name, qty, note) {
this.name = ko.observable(name);
this.quantity = qty;
this.note = note;
}
var viewModel = {
ingredients: ko.observableArray([]),
};
// When last ingredient\'s name changes,
// Add a new row to the list
// Update the global subscription to point to the new item
function lastIngredientNameChanged(newValue) {
var currentfocus = document.activeElement;
if (newValue != \'\') {
lastIngredientSubscription.dispose();
viewModel.ingredients.push(new ingredientViewModel(\'\', \'\', \'\'));
lastIngredientSubscription = viewModel.ingredients()[viewModel.ingredients().length - 1].name.subscribe(lastIngredientNameChanged);
}
currentfocus.focus();
}
// Set up initial entries
viewModel.ingredients.push(new ingredientViewModel(\'\', \'\', \'\'));
var lastIngredientSubscription = viewModel.ingredients()[viewModel.ingredients().length - 1].name.subscribe(lastIngredientNameChanged);
ko.applyBindings(viewModel);
<script type=\"text/html\" id=\"ingredientTemplate\">
< table id = \"ingredienttable\" > < colgroup > < col width = \"200\" / > < col width = \"40\" / > < col / > < /colgroup>
<thead><tr>
<td>Name</td > < td > Amount < /td>
<td>Note</td > < /tr></thead > < tbody > {
{
each ingredients
}
} < tr class = \"ingrediententry\" > < td > < input class = \"ingredientautocomplete\"
data - bind = \"value: name, valueUpdate: \'afterkeydown\'\" / > < /td>
<td><input data-bind=\"value: quantity\" / > < /td>
<td><input data-bind=\"value: note\" / > < /td>
</tr > {
{
/each}}
</tbody > < /table>
</script>
<div data-bind=\"template: \'ingredientTemplate\'\"></div>
没有找到相关结果
已邀请:
1 个回复
藕挝
元素实际上消失了。 您可以做的就是切换到使用模板绑定的选项，该选项只会重新呈现模板中更改的行。您的HTML如下所示：<script type=\"text/html\" id=\"ingredientTemplate\"> <table id=\"ingredienttable\"> <colgroup> <col width=\"200\"/> <col width=\"40\"/> <col/> </colgroup> <thead><tr> <td>Name</td> <td>Amount</td> <td>Note</td> </tr></thead> <tbody data-bind=\"template: { name: \'rowTmpl\', foreach: ingredients }\"> </tbody> </table> </script> <script id=\"rowTmpl\" type=\"text/html\"> <tr class=\"ingrediententry\"> <td><input class=\"ingredientautocomplete\" data-bind=\"value: name, valueUpdate: \'afterkeydown\'\" /></td> <td><input data-bind=\"value: quantity\" /></td> <td><input data-bind=\"value: note\" /></td> </tr> </script> <div data-bind=\"template: \'ingredientTemplate\'\"></div>